canvas的isPointInPath(x,y)判断某一点(x,y)是否在绘制图形之内。填充很试用哦。
代码效果，鼠标移动位置刚好在矩形范围内，则颜色发生变化。
Honeycam 2019-06-03 23-52-14.gif
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>isPointInPath</title>
</head>
<body>
<canvas id="ctx"></canvas>
<script>
var context=document.getElementById("ctx");
var ctx= context.getContext("2d");
var balls=[];
window.onload=function(){
context.width=600;
context.height=600;
context.style.border="1px solid red";
for(var i=0;i<10;i++){
var aball={x:Math.random()*context.width,y:Math.random()*context.height,w:Math.random()*50+20,h:Math.random()*50+20};
balls[i]=aball;
}
draw();
context.addEventListener("mousemove",detect);
}
function draw(){
console.log(balls)
for(var i=0;i<balls.length;i++){
ctx.beginPath();
ctx.fillStyle="#f00";
ctx.fillRect(balls[i].x,balls[i].y,balls[i].w,balls[i].h);
}
}
function detect(e){
var x=e.clientX - context.getBoundingClientRect().left;
var y=e.clientY-context.getBoundingClientRect().top;
for(var i=0;i<balls.length;i++){
ctx.beginPath();
ctx.rect(balls[i].x,balls[i].y,balls[i].w,balls[i].h);
if(ctx.isPointInPath(x,y)){
ctx.fillStyle="#f0f";
ctx.fill();
}
}
}
</script>
</dody>
</html>
网友评论