To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

简单的直线运动

复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation</title>
</head>
<body>
    <script>
        window.addEventListener('load', eventWindowLoaded, false);
        function eventWindowLoaded(){
            canvasApp();
        }
        function canvasApp(){
            var pointImage=new Image();
            pointImage.src="1.png";
            function drawScreen(){
                context.fillStyle="#eeeeee";
                context.fillRect(0,0,theCanvas.width,theCanvas.height);
                context.strokeStyle="black";
                context.strokeRect(1,1,theCanvas.width-1,theCanvas.height-2);

                if(moves>1){
                    moves--;
                    ball.x+=xunits;
                    ball.y+=yunits;
                }

                points.push({x:ball.x,y:ball.y});
                for(var i=0;i<points.length;i++){
                    context.drawImage(pointImage,points[i].x,points[i].y,1,1);
                }

                context.fillStyle="black";
                context.beginPath();
                context.arc(ball.x,ball.y,15,0,Math.PI*2,true);
                context.closePath();
                context.fill();
            }

            var speed=5;
            var p1={x:20,y:250};
            var p2={x:480,y:250};
            var dx=p2.x-p1.x;
            var dy=p2.y-p1.y;

            var distance=Math.sqrt(dx*dx+dy*dy);
            var moves=distance/speed;
            var xunits=(p2.x-p1.x)/moves;
            var yunits=(p2.y-p1.y)/moves;
            var ball={x:p1.x,y:p1.y};
            var points=new Array();

            theCanvas=document.getElementById("canvasOne");
            context=theCanvas.getContext('2d');
            setInterval(drawScreen, 33)
        }
    </script>
    <div style="position:absolute;top:50px;left:50px;"></div>
    <canvas id="canvasOne" width="500" height="500"></canvas>
</body>
</html>
复制代码

 

posted on   Ijavascript  阅读(377)  评论(0)  编辑  收藏  举报

努力加载评论中...
点击右上角即可分享
微信分享提示