キャンバスでの削除

Question

私はイベントのアークを作成して削除しようとしていますが、パーツを追加することはうまく動作し、配列に保存していますので、何とかイベントリスナーを呼び出すと削除できます。

<script> 
    var myCanvas = document.getElementById("myCanvas"); 
    myCanvas.width = window.innerWidth; 
    myCanvas.height = 500; 
    var c = myCanvas.getContext("2d"); 
    var myArr = []; 

    myCanvas.addEventListener("click", function(){  
     var x = event.x; 
     var y = event.y; 
     var radius = 10; 
     myArr.push(new CreateCircle(x, y, radius, "#34495e")); 
     console.log(myArr); 

    }); 

    window.addEventListener('keydown', function(){ 
     myArr.splice(0,1); 
     console.log(myArr); 
    }); 

    function CreateCircle(x, y, radius, color) { 
     this.x = x; 
     this.y = y; 
     this.radius = radius; 
     this.color = color; 

     this.draw = function() { 
      c.beginPath(); 
      c.arc(this.x, this.y, this.radius, 0, Math.PI*2); 
      c.fillStyle = this.color; 
      c.fill(); 
     } 
     this.draw(); 
    } 


</script> 

は私がどのように行う、コンストラクタ関数で削除機能を追加し、keydownのイベントでそれを呼び出す必要があります：配列の値は、そのキャンバスに更新されない コードデクリメントされているのようにコンソールで罰金それをやって行く/それを固定する？

Answer 1

円を削除するには、キャンバスを消去して、修正された円の配列で再描画する必要があります。

まず、CreateCircleメソッドからオブジェクトを返すので、操作するアイテムがあります。ここにインスタンスは必要ありません。

それはあなたが継ぐているのKeyDownハンドラ、だ場合は第二に、あなたはこの

var myCanvas = document.getElementById("myCanvas"); 
 
myCanvas.width = window.innerWidth; 
 
myCanvas.height = 500; 
 
var c = myCanvas.getContext("2d"); 
 
var myArr = []; 
 

 
myCanvas.addEventListener("click", function() { 
 
    var x = event.x; 
 
    var y = event.y; 
 
    var radius = 10; 
 
    myArr.push(CreateCircle(x, y, radius, "#34495e")); 
 
}); 
 

 
window.addEventListener('keydown', function() { 
 
    myArr.splice(0, 1); 
 
    myCanvas.width = myCanvas.width; 
 
    myArr.forEach(function(circle) { 
 
    CreateCircle(circle.x, circle.y, circle.r, circle.c) 
 
    }) 
 
}); 
 

 
function CreateCircle(x, y, radius, color) { 
 
    c.beginPath(); 
 
    c.arc(x, y, radius, 0, Math.PI * 2); 
 
    c.fillStyle = color; 
 
    c.fill(); 
 

 
    return {x: x, y: y, r: radius, c: color}; 
 
}

<canvas id="myCanvas"></canvas>

Answer 2

キャンバスをどこでも更新しません。あなたは以前レンダリングされたフレームをクリアしてから、配列内の円をループし、すべての.drawを呼び出す、ある種の "レンダリング"関数を作成する必要があります。

ヒント： context.clearRectメソッドはキャンバスをクリアするのに便利です。