canvas圆与点的碰撞检测

最新推荐文章于 2022-04-25 21:17:18 发布

iteye_17153

最新推荐文章于 2022-04-25 21:17:18 发布

阅读量212

点赞数

分类专栏：论坛回帖随手写文章标签： javascript ViewUI

论坛回帖随手写专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
<title>text</title>
<style>
html,body{ margin:0; padding:0;}
</style>
</head>
<body>
<canvas id="mycircle" width="400" height="300" style="border:1px solid #333; position:absolute; left:0; top:0;"></canvas>
<script type="text/javascript">
var Circle = function(){
this.x = 0;
this.y = 0;
this.radius = 50;
this.z = 0;
this.vx = 5;
this.vy = 5;
this.color = '#000000';
}
Circle.prototype.hitTestPoint = function(point){
return (point.x-this.x)*(point.x-this.x) + (point.y-this.y)*(point.y-this.y) < this.radius *this.radius;
}
var mouse = {x:-1000,y:-1000};
var circle = new Circle();
var ctx = document.getElementById("mycircle").getContext("2d");
function loop(){
circle.x += circle.vx;
circle.y += circle.vy;
if(circle.x>ctx.canvas.width-circle.radius){
circle.x = ctx.canvas.width-circle.radius
circle.vx *= -1;
}
if(circle.x<circle.radius){
circle.x = circle.radius;
circle.vx *= -1;
}
if(circle.y>ctx.canvas.height-circle.radius){
circle.y = ctx.canvas.height-circle.radius
circle.vy *= -1;
}
if(circle.y<circle.radius){
circle.y = circle.radius;
circle.vy *= -1;
}
circle.color = circle.hitTestPoint(mouse)?'#ff0000':'#000000';
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fillStyle = circle.color;
ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,false);
ctx.fill();
}
setInterval(loop,23);
ctx.canvas.onmousemove = function(e){
mouse.x = e.clientX;
mouse.y = e.clientY;
};
ctx.canvas.onmouseout = function(){
mouse.x = -1000;
mouse.y = -1000;
}
</script>
</body>
</html>