HTML5 Cavans(10) 简单动画:摆动

最新推荐文章于 2022-03-31 21:57:10 发布

my98800

最新推荐文章于 2022-03-31 21:57:10 发布

阅读量1k

点赞数 1

分类专栏： HTML

HTML 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html >
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var btnStart = document.getElementById("btnStart");
            var btnStop = document.getElementById("btnStop");
        
            var isPlay = true;
            btnStart.style.display = "none";

            btnStart.onclick = function () {
                isPlay = true;
                this.style.display = "none";
                btnStop.style.display = "";
                animate();
            }
            btnStop.onclick = function () {
                isPlay = false;
                this.style.display = "none";
                btnStart.style.display = "";
            }

            //形状类，构造函数传入起始坐标，宽度，长度
            function Shape(x, y, width, height) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
            }

            var shapes = [];
            //随即产生形状
            for (var i = 0; i < 10; i++) {
                var x = Math.random() * 250;
                var y = Math.random() * 250;
                var width = Math.random() * 50;
                shapes.push(new Shape(x, y, width, width));
            }

            function animate() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                var len = shapes.length;
                for (var i = 0; i < len; i++) {
                    var tmpShape = shapes[i];
                    //产生摆动效果
                    tmpShape.x += Math.random() * 4 - 2;
                    tmpShape.y += Math.random() * 4 - 2;
                    context.fillRect(tmpShape.x, tmpShape.y, tmpShape.width,tmpShape.height);

                }

                if (isPlay)
                    setTimeout(animate, 33);
            }
            animate();
        }
       
    </script>
</head>
<body>
    <canvas id="myCanvas" height="500px" width="500px" style="border:1px black solid">
    </canvas>
    <input id="btnStart" type="button" value="start" >
    <input id="btnStop" type="button" value="stop" >
</body>
</html>