HTML5 Canvas绘制跟随鼠标移动的球

角速度应用:

 

             //获取到Canvas

            var canvas = document.getElementById("stage");  

            //2d绘图版

            var context = canvas.getContext("2d");  

            //球运行的速度

            var ballSpeed=4;

            



            

            //字弹对象

            var ball=function(x,y,radius,color)

            {

                this.x=x;

                this.y=y;

                this.radius=radius;

                this.color=color;

                //绘制字弹

                this.draw=function()

                {    

                     //清空画板

                    context.save();        

                    context.beginPath();         

                    context.strokeStyle = this.color;

                    context.fillStyle = this.color;   

                    context.lineWidth = 5;                

                    context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);  

                    context.closePath();                   

                    context.fill(); 

                    context.stroke();

                }

            }

            

            

            //中心点位置

            var centerX=canvas.width/2;

            var centerY=canvas.height/2;

            

            //创建球

            var myBall=new ball(centerX,centerY,10,"ff0000")

            myBall.draw();

            

            var mouseX=centerX;

            var mouseY=centerY;

            //添加按键事件

             canvas.addEventListener("mousemove", onMouseMove, false);  

             

             //记录鼠标移动到的位值

             function onMouseMove(evt)

             {                              

                  mouseX=evt.layerX;

                 mouseY=evt.layerY;

             }            

            

            //动画处理

            var drawAsync = eval(Jscex.compile("async", function () {

                            

                            while(true)

                            {    

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

                                 //计算夹角

                                 var dx=mouseX-myBall.x;

                                 var dy=mouseY-myBall.y;                 

                                 var angle=Math.atan2(dy,dx);

                                 

                                 //角速度

                                 myBall.x+=Math.cos(angle)*ballSpeed;

                                 myBall.y+=Math.sin(angle)*ballSpeed;                              

                                //重绘球

                                myBall.draw();                            

                                $await(Jscex.Async.sleep(1000/60));

                            }

                                   

                }));

                drawAsync().start();

 

作者：Louja
出处：http://loujady.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。