如何通过多次单击在画布上显示多个箭头

I am trying to display multiple arrows on canvas, so when after I click it creates completely new arrow. I am a beginner as you can see, thank you for any help or further ideas of how to improve the code!

我试图在画布上显示多个箭头，所以当我点击它之后会创建一个全新的箭头。我是初学者，您可以看到，感谢您对如何改进代码的任何帮助或进一步的想法！

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>

更多相关文章

随机推荐