Heim  >  Artikel  >  Web-Frontend  >  HTML5-Codebeispiel für eine elliptische (Ei) bewegliche Kugel

HTML5-Codebeispiel für eine elliptische (Ei) bewegliche Kugel

黄舟
黄舟Original
2017-03-03 16:52:502116Durchsuche

Elliptische und elliptische Bewegung:

 
             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);
           }

Das Obige ist der Inhalt des HTML5-Codebeispiels für einen elliptischen (Ei) beweglichen Ball. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn