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
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。 

 

转载于:https://www.cnblogs.com/loujady/archive/2011/12/08/2281112.html