複数の矢印をキャンバスに複数回クリックする方法

Question

キャンバスに複数の矢印を表示しようとしていますので、クリックすると完全に新しい矢印が作成されます。私はあなたが見ることができるように初心者です、どのようにコードを改善するための任意の助けやアイデアをありがとう！

var arrowX = -300; 
 
var arrowY = 300; 
 

 
window.onload = function() { 
 
    canvas = document.getElementById("myCanvas"); 
 
    gc = canvas.getContext("2d"); 
 

 
    document.addEventListener("click", mouseClickHandler, false); 
 
    window.setInterval(render, 200); 
 

 
    arrow = document.getElementById("arrow"); 
 
}; 
 

 
function mouseClickHandler(event) { 
 
    if (event.target.tagName.localeCompare("canvas") && event.button == 0) { 
 
     arrowX = event.clientX; 
 
     arrowY = event.clientY; 
 
    } 
 
} 
 

 
function arrowDown() { 
 
    //makes arrow go down 
 
    if (arrowY < 450) { 
 
     arrowY += 6; 
 
    } 
 
    if (arrowY < 250) { 
 
     arrowY -= 3; 
 
    } 
 
} 
 

 
function render() { 
 
    gc.clearRect(0, 0, 1500, 500); 
 
    gc.drawImage(arrow, arrowX, arrowY); 
 
    arrowDown(); 
 
}

<canvas id="myCanvas" width="1500" height="500" style="border:1px solid black;" tabindex="1" onclick="mouseClickHandler(event);"> 
 
    <img id="arrow" class="arrow" src="https://i.stack.imgur.com/evnjm.png" width="20" height="50" />  
 
</canvas>

Answer 1

私はこれに非常によく似疑問を持っていました！コンストラクタを使用してこのコードを試してください：

var id = 0; 
var arrows = []; 
function Arrow(x, y) { 
this.id = id++ 
this.y = y || 0 
this.x = x || 0 
} 
// remove the shape from the array function terminate(id) { 
arrows = arrows.filter(arrow => arrow.id !== id) 
} 
// or add a shape 
function spawn() { 
arrows.push(new Arrow()) 
} 
function moveAll(){ 
arrows.forEach(arrow => arrow.y++;) 
} 
function drawAll(){ 
arrows.forEach(arrow => /* draw arrow;*/) 
} 

私はこれが助けてくれることを願っています！

ここでは、キャンバス上でクリックイベントをしたい場合、それは、代わりに文書であり、それを入れています同様のquestion