使用H5canvas绘制自上而下运动效果案例 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>圆形自上向下运动效果</title>
    </head>
    <body>
        <canvas id="canvas" width="300px" height="400px"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var y = 10;
            var x = Math.random()*canvas.width;
            
            var myimg = new Image();
            myimg.src="../第二天/images/spjt.png"
            //定时器
            setInterval(function(){
                y++;
                //绘制背景图片
                context.drawImage(myimg,0,0);
                if(y < canvas.height){
                    //绘制圆形
                    context.beginPath();
                    context.arc(x,y,10,0,Math.PI*2);
                    context.fill();
                }
            },10);
        </script>
    </body>
</html>

 

posted @ 2017-08-16 21:36  青涩的柠檬酸  阅读(601)  评论(0)  编辑  收藏  举报