请问,为什么我的canvas动画跳动的这么快?

来源:8-2 编程练习

慕尼黑6530071

2018-03-20 16:04:56


<!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 context=canvas.getContext("2d");

        var posx=0,posy=0,dir=1;

        setInterval(function(){

            posy+=10*dir;

            context.clearRect(0,0,canvas.width,canvas.height);

            context.fillStyle="green";

            context.fillRect(posx,posy,50,50);

           

            if(posy+50>=canvas.height){

                dir=-1;

            }else if(posy<0){

                dir=1;

            }

            

        },100);

        

        

    </script>

</body>

</html>


写回答

2回答

啊五

2018-05-21

貌似是效果预览的问题,你把代码粘贴到本地,再用浏览器打开网页就正常了

0

怎么都被占用了呢

2018-03-20

你将定时器的间隔时间设置大一些不就好了么

0

0 学习 · 626 问题

查看课程