在edge打开没有问题，在旁边这个自动运行有问题
来源：8-2 编程练习
Ting111
2020-07-07 10:51:19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas动画</title>
<style>
canvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas width="800px" height="800px" id="canvas">您的浏览器不支持canvas</canvas>
<script>
var canvas=document.getElementById("canvas");
var cc=canvas.getContext("2d");
//补充代码
var x=100,y=0,d=1;
setInterval(function(){
y+=10*d;
cc.clearRect(100,0,canvas.width,canvas.height);
cc.fillStyle='green';
cc.fillRect(x,y,100,100);
if(y+100>=canvas.height){
d=-1;
}else if(y<canvas.height){
d=1;
}
},500)
</script>
</body>
</html>
3回答
-
同学你好，老师在edge上测试，绿色的方框运动到底部后，也会在底部反复上下移动，和在线编辑器的表现一样。原因是else if的条件书写不正确，如下：
初始时，方框向下运动，当y满足if的条件时，y=700，然后d变成了“-1”；下一刻，根据“y+=10*d;”得到y=690，视觉上，方框向上运动了一下，此时y满足else if的条件，d又等于“1”了，所以下一刻，根据“y+=10*d;”，y=700，视觉上方框又向下运动了一下，依此反复。
可将else if的条件修改成如下：
由于edge浏览器的版本不同，可能出现同学那里可以正常运行的情况。
建议同学换成谷歌浏览器测试，该浏览器是程序员使用特别多的浏览器，性能兼容性都比较好些。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0h020-07-07 -
Ting111
提问者
2020-07-07
今天网站是不是出问题了，打不开视频
0 -
好帮手慕久久
2020-07-07
同学你好，修改js代码后，需要多刷新几遍页面，防止由于浏览器有缓存，页面无法及时更新。
老师已经在上一次的讲解中，给你讲了为什么写成y < canvas.height会出现反复的现象，同学再好好看一下。当写成y<=0时，意思是方块运动到顶部后，再更换运动方向（y是方框距离画布顶部的距离），同学结合之前的讲解和下图，再体会一下。
祝学习愉快！
0
相似问题
回答 2
回答 5