HTML5 Cavans(11) 简单动画：圆周运动 

<!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, radius, angle) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                if (angle == undefined) {
                    this.angle = 0;
                }
                else {
                    this.angle = angle;
                }
            }

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

            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];

                    var angle = tmpShape.angle + Math.PI / 100;
                    if (angle > Math.PI * 2)
                        angle = 0;
                    tmpShape.angle = angle;
                    //半径是直角三角形斜边，根据角度计算x和y的偏移
                    var x = tmpShape.radius * Math.cos(angle);
                    var y = tmpShape.radius * Math.sin(angle);
                    //画出半径轨迹
                    context.beginPath();
                    context.moveTo(tmpShape.x, tmpShape.y);
                    context.lineTo(tmpShape.x + x, tmpShape.y + y);
                    context.stroke();
                    context.fillRect(tmpShape.x + x-5, tmpShape.y + y-5, 10, 10);

                }

                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>

 

posted @ 2012-07-11 13:21  Bug山Bug海  阅读(466)  评论(0)    收藏  举报