我們怎樣才能為鼠標(biāo)懸停時(shí)使用html畫布繪制的圓圈提供陰影和筆觸。我有兩個(gè)圓圈，并希望在鼠標(biāo)懸停期間有一個(gè)陰影和筆劃，但當(dāng)我將鼠標(biāo)懸停在圓圈上時(shí)，代碼會添加陰影和描邊，但是一旦鼠標(biāo)從圓圈中聚焦，陰影就會變暗但不會消失。<html><body>
<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas></body><script>var canvas = document.getElementById("myCanvas"),
ctx = canvas.getContext("2d"),
circle = [
{x: 60, y: 50, r: 40, },
{x: 100, y: 150, r: 50,}// etc.
];// render initial rects.for (var i = 0; i < circle.length; i++) {
ctx.beginPath();
ctx.arc(circle[i].x, circle[i].y, circle[i].r,0,2*Math.PI);
ctx.fillStyle= "grey";
ctx.fill();}
canvas.onmousemove = function (e){
// console.log("mouseover");
var cir = this.getBoundingClientRect(),
x= e.clientX - cir.left,
y = e.clientX - cir.top,
i = 0 , r;
console.log(r);
// ctx.clearRect(0, 0, c.width, c.height);
while (r = circle[i++])
{
ctx.beginPath();
ctx.arc(r.x,r.y,r.r,0,2*Math.PI)
if (ctx.isPointInPath(x, y))
{
ctx.shadowBlur= 10;
ctx.shadowColor = "grey";
ctx.lineWidth = 3;
ctx.strokeStyle = 'rgb(255,255,255)'
ctx.stroke();
}
else
{
ctx.arc(r.x,r.y,r.r,0,2*Math.PI)
}
}
};</script></html>
如何在畫布上的mousemove上添加筆畫和陰影？
暮色呼如
2019-04-17 13:15:04