相关疑难解决方法(0)

我有一些在画布上绘制矩形的代码,但是当我将鼠标悬停在它上面时,我希望该矩形能够改变颜色.

问题是我绘制矩形之后我不确定如何再次选择它来进行调整.

我想做的事:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

$('c.[rectangle]').hover(function(this){
    this.fillStyle = 'red';
    this.fill();
});

我是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, …

我是画布上的新手,任何人都可以帮助缩短这个问题.

我创建了5个画布圈.当我将鼠标悬停在任何圆圈上时,我只需更改画布颜色,当悬停在圆圈上时,我在画布上添加了一个类但是可以仅更改颜色.我不想再次创建画布时只更改悬停时的颜色.

$(document).ready(function(){
 $('.menuballs').hover(function () {
  $(".menuballs").children('canvas').toggleClass('hover-intro');
   if($(this).is(':hover'))
   {
     var c = document.getElementsByClassName("hover-intro");            
     var graphics = c.getContext( '2d' );
     graphics.fillStyle = 'green';
     graphics.fill();
   }
  });
});

尝试使用hover-intro类,但是给定HTMLElement,我需要CanvasElement来填充圆圈.