JSFiddle

  • Collision detection with Canvas

    No-Library (pure JS), HTML, CSS, JavaScript

    class Game {
      constructor(opt) {
        this._canvas = opt.canvas;
        this._ctx = this._canvas.getContext('2d');
        
        this._assets = opt.assets;
        this._loadedAssets ...
  • Move object with keyboard

    No-Library (pure JS), HTML, CSS, JavaScript

    class Game {
      constructor(opt) {
        this._canvas = opt.canvas;
        this._ctx = this._canvas.getContext('2d');
        
        this._assets = opt.assets;
        this._loadedAssets ...
  • Image filters with canvas

    No-Library (pure JS), HTML, CSS, JavaScript

    /**
     * イメージにいろんなフィルタをかける
     */
     class ImageFilter {
      /**
       * @param {Object} param パラメータ
       * @param {string} param.el 画像を表示する要素のセレクタ
       * @param {string} param.imageSrc 画像ファイルのURL
       * @param {number} param ...
  • Canvas zoom in-out #2 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    document.getElementById('image').appendChild(canvas);
    
    const img = new Image();
    img ...
  • Difference between $Emit and Callback with Vue.js

    Vue 2.2.1, HTML, CSS, JavaScript

    /** Emit */
    const MyButtonEmit = {
    	template: '#my-button-emit',
      props: {
      	onClickEvent: {
          type: String,
          require: true
        }
      },
      methods: {
        onClick (val) {
          debugger
          this.$emit(this.onClickEvent, val ...
  • HTML5 Canvas Zoom and Pan Image

    No-Library (pure JS), HTML, CSS, JavaScript

    class ImageEditor {
      /**
       * Canvas操作
       * @param {Object} opt 
       * @param {string} opt.imageSrc イメージのURL
       * @param {string} opt.canvasId canvasタグのid(デフォルト: image-for-edit)
       * @param {Number ...
  • Trim image with canvas

    No-Library (pure JS), HTML, CSS, JavaScript

    const trimmedImage = document.getElementById('trimmed-image');
    
    function trimImage (src) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
        
      const img ...
  • Combobox

    No-Library (pure JS), HTML, CSS, JavaScript

    <input type="text" list="fruits">
    <datalist id="fruits">
      <option>Apple</option>
      <option>Apricot</option>
      <option>Avocado</option>
      <option>Banana</option>
      <option>Bilberry</option>
      <option>Blackberry</option>
      <option>Blackcurrant</option>
      <option>Blueberry</option>
      <option>Boysenberry</option>
      <option>Currant</option>
      <option>Cherry</option>
      <option>Cherimoya</option>
      <option>Chico fruit</option>
      <option>Cloudberry</option>
      <option>Coconut</option>
      <option>Cranberry</option>
      <option>Cucumber</option>
      <option>sugar apple ...</option></datalist>
  • Fuzzy Search - Vue,js

    Vue 2.2.1, HTML, CSS, JavaScript

    new Vue({
    	el: '#app',
      data: () => {
        return {
          input: '',
          // https://simple.wikipedia.org/wiki/List_of_fruits
    			items: ['Apple','Apricot','Avocado','Banana','Bilberry','Blackberry ...
  • CSS Marquee like Bullet train Ad

    No-Library (pure JS), HTML, SCSS, JavaScript

    <div class="electric-board">
      <div class="seat-info">
        <div class="info-container">
          <p class="info -ja">指定席</p>
          <p class="info -en">Reserve</p>
        </div>
      </div>
      <div class="message-container">
        <p class="message">新幹線車内メディアの電光文字広告は、64文字のメッセージ、7色から選べる表示色、東京〜新大阪、1ヶ月表示で330万円になります。</p>
      </div>
    </div>