if判断条件 + 50？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas动画</title>
<style>
canvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas width="800px" height="500px" id="canvas">您的浏览器不支持canvas</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//补充代码
var posx = 400,
posy = -10;
dir= 1,
timer = 0,
isMouseInRect = false;
canvas.onmousemove = function(e){
var mousex = e.offsetX,
mousey = e.offsetY;
if(mousex >= posx && mousex <= posx + 50 && mousey >= posy && mousey <= posy + 50){
// clearInterval(timer);
isMouseInRect = true;
}else{
isMouseInRect = false;
// if(timer){
// clearInterval(timer);
// }
// run();
}
}
// function run(){
timer = setInterval(function(){
console.log(timer);
if(!isMouseInRect){
posy += 10 * dir;
ctx.clearRect(0,0,canvas.width,canvas.height);
// ctx.fillStyle = 'green';
ctx.fillRect(posx,posy,50,50);
if(posy + 50 >= canvas.height){
dir = -1;
}else if(posy <= 0){
dir = 1;
}
}
},100);
// }
// run();
</script>
</body>
</html>1、if判断条件在不 +50的情况，不是已经通过mousex和mousey判断出矩形的边界了吗，为什么无法停止矩形？
2、注释部分代码，清除setInterval是为了腾出运算空间？
3、运行注释部分代码，为什么未移动到矩形内，在矩形周围就会卡顿，边卡顿边移动？
麻烦老师帮我解答下疑问，谢谢
0
收起
正在回答
1回答
你好，代码实现效果是正确的。
1、posy是开始绘制矩形的点，也就是左上角的点:
所以垂直方向的时候需要加上50，也就是矩形的高度，否则判断的就是左上角，需要判断矩形底部是否超出。
2、注释部分代码，清除setInterval是为了腾出运算空间，这样理解也是可以的，但是这里不能清除定时器，给canvas绑定的是mousemove事件，只要在canvas中移动，就会清除定时器，也就出现了同学说的第三个问题，会有卡顿现象，所以这里可以不清楚定时器。
祝学习愉快！
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星