HTML5椭圆（蛋）运动的小球的代码实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5椭圆（蛋）运动的小球的代码实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1599字，纯文字阅读大概需要3分钟。

内容图文

椭圆与椭圆运动：

 
             var canvas=document.getElementById("ballBroad");
 
            var context=canvas.getContext("2d");
            //角度
            var angle=0;
            //角度步长
            var speedAngle=0.1;
           
            //刷新频率
            var frames=1000/60;
            //球对象
            var Ball=function(radius,color,x,y)
            {
                this.radius=radius;
                this.color=color;
                this.x=x;
                this.y=y;
            }
            //中心点
            var centerX=canvas.width/2;
            var centerY=canvas.height/2;
            //存放小球走过的点
            var points=[];
           
           
            //创建一个球
            var newBall=new Ball(20,"#ff000",0,centerY);
            
            //在画板中间绘制球
            //DrawBall(newBall);
            //存放
            //points.push({x:newBall.x,y:newBall.y});
           
           
            //让球平稳的动起来
            var drawAsync = eval(Jscex.compile("async", function () {
                        while(true)
                        {
                            newBall.y=centerY+Math.sin(angle)*(centerY/2+20);
                            newBall.x=centerX+Math.cos(angle)*centerX;
                            angle+=speedAngle;
                            DrawBall(newBall);
                            //存放小球的点
                            points.push({x:newBall.x,y:newBall.y});
                           
                            //绘制线条
                            DrawBallLine();
                            //画蛋疼
                            DrawText("蛋疼",centerX-50,centerY);
                            //每秒60次
                            $await(Jscex.Async.sleep(frames));
                           
                        }   
                       
                                                                   
            }));
           drawAsync().start();
          
           function DrawBall(ball)
           {
               context.clearRect(0, 0, canvas.width, canvas.height);
               //在画板中间绘制球
            context.beginPath();
            context.arc(ball.x, ball.y, newBall.radius, 0, 2 * Math.PI, false);
            context.fillStyle = ball.color;
            context.fill();
            context.lineWidth = 5;
            context.strokeStyle = "#ff0000";
            context.stroke();
           }
           //绘制小球的移动轨迹
           function DrawBallLine()
           {
                    for(var i=0;i<points.length;i++)
                    {
                        if(i==0)
                        {
                            context.moveTo(points[i].x,points[i].y)
                        }
                        context.lineTo(points[i].x,points[i].y)
                        context.stroke();
                    }
           }
           //写蛋疼
           function DrawText(text,x,y)
           {
                context.font = "40pt Arial";
             context.fillText(text, x, y);
           }

以上就是HTML5 椭圆（蛋）运动的小球的代码实例的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

内容总结

以上是互联网集市为您收集整理的HTML5椭圆（蛋）运动的小球的代码实例全部内容，希望文章能够帮你解决HTML5椭圆（蛋）运动的小球的代码实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---