我是Javascript/Canvas的新手,我想创建一个动画,只要我在画布中单击就会创建圆圈,然后当我将鼠标悬停在它们上面时它会改变颜色,当鼠标悬停在它们上面时它会恢复原始颜色.我能够在点击时创建绘制圆圈的动画,但无法使悬停颜色起作用.我正在尝试使用Javascript完全完成此操作,仅使用HTML来创建画布.任何建议都很感激!
let dots = [];
/** @type {HTMLCanvasElement} */
let canvas = ( /** @type {HTMLCanvasElement} */ document.getElementById("canvas"));
let context = canvas.getContext('2d');
//some state
let mouseX = -10;
let mouseY = -10;
//remember mouse click position
canvas.onclick = function (event) {
mouseX = event.clientX;
mouseY = event.clientY;
let box = (event.target).getBoundingClientRect();
mouseX -= box.left;
mouseY -= box.top;
};
canvas.onmouseleave = function () {
mouseX = -10;
mouseY = -10;
};
var drawCirc = function (hover) {
//clear the canvas
context.clearRect(0, …