代码改变世界

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

2011-12-08 18:35 by LoujaDy, ... 阅读, ... 评论, 收藏, 编辑

角速度应用:

 

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