キャンバスから要素を削除せずに要素を消去する方法はありますか？

Question

キャンバス付きのページローダーを作成していて、es6クラスを使用しています...現時点では、正しく動作させることはできません。理由の1つは、キャンバスの進行。

---

class Loader { 

constructor (width, height) { 
    this.width = width 
    this.height = height 
} 


_init() { 
    this._createCanvas() 
    this._bindEvents() 
} 
// create canvas 
_createCanvas() { 
    this.canvas = document.createElement("canvas") 
    document.body.appendChild(this.canvas) 
    this.canvas.id = "canvas" 
    this.canvas.width = loader.width 
    this.canvas.height = loader.height 
} 

_throttle (callback, delay) { 
    let last 
    let timer 
    return function() { 
     let context = this 
     let now = +new Date() 
     let args = arguments 
     if (last && now < last + delay) { 
      clearTimeout(timer) 
      timer = setTimeout(function() { 
       last = now 
       callback.apply(context, args) 
      }, delay) 
     } else { 
      last = now 
      callback.apply(context, args) 
     } 
    } 
} 

// resize canvas 
_resizeCanvas() { 
    // resize canvas 
    var canvasRatio = this.canvas.height/this.canvas.width; 
    var windowRatio = window.innerHeight/window.innerWidth; 
    var width; 
    var height; 

    if (windowRatio < canvasRatio) { 
     height = window.innerHeight; 
     width = height/canvasRatio; 
    } else { 
     width = window.innerWidth; 
     height = width * canvasRatio; 
    } 

    this.canvas.width = width 
    this.canvas.height = height 
} 

_bindEvents() { 
// create events listeners 
    this.resizeCanvas = this._throttle(function (event) { 
     this._resizeCanvas() 
    }.bind(this), 250) 

    window.addEventListener('resize', this.resizeCanvas, false) 
} 

_unbindEvents() { 
// remove events listeners 
    window.removeEventListener('resize', this.resizeCanvas, false) 
} 


} 



class Snake { 
    constructor(options = {}) { 
    this.options = { 
     x: options.x, 
     y: options.y, 
     height: options.height, 
     width: options.width, 
     isMoving: options.isMoving || false, 
     hasDispatched: options.hasDispatched || false, 
     nextSnakeCallback: options.nextSnakeCallback || null, 
     speed: options.speed || 4 
    } 
} 

_init() { 
    this._drawSnake() 
} 
start() { 
    this.options.isMoving = true; 
} 

reset() { 
    this.options.hasDispatched = false; 
} 

setNextSnakeCallback (callback) { 
    this.options.nextSnakeCallback = callback; 
} 

_drawSnake() { 
    this.canvas = document.getElementById("canvas") 
    this.ctx = this.canvas.getContext("2d") 
    this.ctx.beginPath() 
    this.ctx.rect(
     this.options.x, 
     this.options.y, 
     this.options.width, 
     this.options.height) 
    this.ctx.fillStyle = "#f44242" 
    this.ctx.fill() 


} 

_clearSnake() { 
    this.ctx.clearRect(this.options.x, this.options.y, this.options.width, this.options.height); 

} 

} 

class SnakeTop extends Snake { 

    constructor (options) { 
    super(options) 
    } 

_init() { 
    super._drawSnake() 
    this._moveSnakeToRight() 
    super._clearSnake() 
} 

reset() { 
    this.options.x = this.options.height; 
} 

_moveSnakeToRight() { 
    if(this.options.isMoving){ 

     this._clearSnake() 
     this._drawSnake() 

     if(this.options.x > loader.width - this.options.width && !this.options.hasDispatched){ 
      this.options.hasDispatched = true; 
      if(this.options.nextSnakeCallback) { 
       this.setNextSnakeCallback() 
      } 
     } else if(this.options.x >= loader.width){ 
      this.options.isMoving = false; 
     } 

     this.options.x += this.options.speed 


    } 

    window.requestAnimationFrame(this._moveSnakeToRight.bind(this)); 
    } 

    } 


class SnakeRight extends Snake { 

    constructor (options = {}) { 
     super(options) 
    } 

_init() { 
    super._drawSnake() 
    this._moveSnakeDown() 
    super._clearSnake() 
} 

_moveSnakeDown() { 
    if(this.options.isMoving) { 
     this._clearSnake() 
     this._drawSnake() 

     if(this.options.y > loader.height - this.options.height && !this.options.hasDispatched){ 
      this.options.hasDispatched = true; 
      if(this.options.nextSnakeCallback) { 
       this.setNextSnakeCallback() 
      } 

     } else if (this.options.y > loader.height) { 
      this.options.isMoving = false 
     } 
      this.options.y += this.options.speed 
    } 
    window.requestAnimationFrame(this._moveSnakeDown.bind(this)); 

    } 
    } 


class SnakeBottom extends Snake { 

    constructor (options = {}) { 
     super(options) 
} 
_init() { 
    super._drawSnake() 
    this._moveSnakeToLeft() 
    super._clearSnake() 
} 

_moveSnakeToLeft() { 
    if (this.options.isMoving) { 

     this._clearSnake() 
     this._drawSnake() 

     if(this.options.x < 0 && !this.options.hasDispatched){ 
      this.options.hasDispatched = true 
      if(this.options.nextSnakeCallback) { 
       this.setNextSnakeCallback() 
      } 
     } else if (this.options.x < this.options.width) { 
      this.options.isMoving = false 
     } 
     this.options.x -= this.options.speed 

    } 

     window.requestAnimationFrame(this._moveSnakeToLeft.bind(this)); 
    } 

    } 


    class SnakeLeft extends Snake { 
    constructor(options = {}) { 
     super(options) 
    } 

_init() { 
    super._drawSnake() 
    this._moveSnakeUp() 
    super._clearSnake() 
} 

_moveSnakeUp() { 
    if(this.options.isMoving) { 

     this._clearSnake() 
     this._drawSnake() 

     if(this.options.y < 0 && !this.options.hasDispatched) { 
      this.options.hasDispatched = true 
      if(this.options.nextSnakeCallback) { 
       this.setNextSnakeCallback() 
      } 

     } else if (this.options.y > - this.canvas.height) { 
      this.options.isMoving = false 
     } 
     this.options.y -= this.options.speed 
    } 
     window.requestAnimationFrame(this._moveSnakeUp.bind(this)); 
    } 
    } 




// defining the elements on the DOM 

    let loader = new Loader (600, 600) 
    loader._init() 

//CREATE SNAKES 
    let snakeT = new SnakeTop ({ 
    x: - 300, 
    y: 0, 
    height: 20, 
    width: 300 
    }) 
    snakeT._init() 


//ASSIGN NEXT SNAKE callback 
    snakeT.setNextSnakeCallback (()=>{ 
    snakeR.reset(); 
    snakeR.start(); 
    }); 

    //START FIRST SNAKE 
    snakeT.start(); 

---

ので、他の3つの要素を構築する上：

これは、これまでのところ、私のコードです。あなたがjsfiddleから見ることができるように

は、私の機能drawSnakeは（）私の研究中に

 https://jsfiddle.net/ombqfzjq/ 

他の私は矩形をクリアすることを発見した後に四角形をdrawning、代わりの

ctx.clearRect(0,0,canvasWidth,canvasHeight); 

を使用し続けますキャンバスをきれいに、私が代わりにEAをきれいにする必要があり

ctx.clearRect(square.x,square.y,square.w,square.h); 

を使用することができます

ch単一の矩形... 私のクラスSnakeでは、_clearSnake（）関数を構築し、それを必要に応じてサブクラスに呼び出しました。

私のロジックに何が間違っていますか？コードを改善するにはどうすればよいですか？

Answer 1

キャンバスにペイントしたら、単にそのオブジェクトを削除することはできません。

Canvas 'はHTML要素のように階層化されていないため、オブジェクトを削除してもその下にオブジェクトは表示されません。

最もクリーンな方法は、前に状態を再ペイントすることです。