canvas笔记–圆形碰撞检测
<!DOCTYPE html>
<html lang=”zh”>
<head>
? ? <meta charset=”UTF-8″>
? ? <title></title>
? ? <style>
? ? ? ? #mc {
? ? ? ? ? ? display: block;
? ? ? ? ? ? box-shadow: 0 0 10px black;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }
? ? </style>
</head>
<body>
<canvas id=”mc” width=”1000px” height=”600px”></canvas>
<script>
var mc = document.getElementById(‘mc’);
var ctx = mc.getContext(‘2d’);
var smallStyle = ‘pink’;
function drawBig(){
ctx.beginPath();
ctx.fillStyle = ‘orange’;
ctx.arc(500,300,100,0,2*Math.PI);
ctx.fill();
}
mc.onmousemove = function (ev){
//清理画布
ctx.clearRect(0,0,1000,600);
var e = ev || window.event;
//获取到鼠标的坐标
var mx = e.offsetX;
var my = e.offsetY;
drawBig();
//绘制小球
ctx.beginPath();
ctx.arc(mx,my,50,0,2*Math.PI);
ctx.fillStyle = smallStyle;
ctx.fill();
//当圆心距小于半径之和时
var dis = Math.sqrt(Math.pow(mx-500,2)+Math.pow(my-300,2));
if(dis<=150){
console.log(1);
smallStyle = ‘blue’;
} else {
smallStyle = ‘pink’;
}
}
</script>
</body>
</html>
未碰撞时这样子的
小球碰撞后小球变色
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » canvas笔记–圆形碰撞检测
