关于isPointInPath(x,y)
老师，我调试了这个代码，为什么我的context.isPointInPath(x,y)输出的值总是false，chorme，firefox，ie都是，还有用fillRect()绘制的矩形，判断其内部的点也是返回false，这是为什么啊？
4 回答
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas伪类</title>
</head>
<body>
<canvas class="" id="canvas" width=''></canvas>
<script>
var balls =[];
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
window.onload = function(){
canvas.width =800;
canvas.height =800;
context.fillStyle ="#085";
for(var i = 0; i<10;i++){
var aBall = {
x:Math.random()*canvas.width,
x:Math.random()*canvas.height,
r:Math.random()*50+20};
balls[i] = aBall;
}
draw();
canvas.addEventListener("mousemove",detect)
}
function draw(x,y){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i = 0 ;i<balls.length;i++){
context.beginPath();
context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);
if( context.isPointInPath(x,y)){
context.fillStyle="red";
}else{
context.fillStyle="#058";
}
context.fill();
}
}
function detect(event) {
var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;
draw(x,y);
}
</script>
举报
0/150
提交
取消
