小圆球线性垂直运动
一、需求
现在要在手机上做一个小圆球做线性垂直运动并且记录下运动轨迹的demo，如图所示
图一
二、思路
从结构上来说分为一个小黄球和一个黑色轨迹线，所以我们可以分别绘制小黄球和轨迹线，那这两者之间有什么联系呢？
我们可以发现轨迹线是最终点始终是小黄球的中心点坐标，根据这个我们可以用小黄球的中心点的坐标来确定轨迹。
1.首先在html中插入canvas标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html,body{ height: 100%; width:100%; overflow: hidden; } body,canvas{ padding: 0; margin: 0; } </style> </head> <body> <canvas id="canvas"></canvas> </body> <script src="js/ball.js" type="text/javascript" charset="utf-8"></script> <script src="js/track.js" type="text/javascript" charset="utf-8"></script> <script src="js/wave.js" type="text/javascript" charset="utf-8"></script> </html>
2.绘制小黄球的 ball.js
function Ball(obj){ this.x=obj.x||0; this.y=obj.y||0; this.rotation=obj.rotation||0; this.radius=obj.radius||40; this.color=obj.color||"#ff0" this.lineWidth=obj.lineWidth||0; this.scaleX=obj.scaleX||1; this.scaleY=obj.scaleY||1; } Ball.prototype.draw=function(context,canvas){ context.save(); context.translate(this.x,this.y); context.rotate(this.rotation); context.scale(this.scaleX,this.scaleY); context.fillStyle=this.color; context.lineWidth=this.lineWidth; context.beginPath(); context.arc(0,0,this.radius,0,Math.PI*2,true); context.closePath(); context.fill(); //context.stroke(); //如果把这个注释去掉的话,会出现如图二的效果 context.restore(); }
图二
3.绘制轨迹线的 track.js
function Track(obj){ this.x=obj.x||0; this.y=obj.y||0; this.rotation=obj.rotation||0; this.radius=obj.radius||40; this.color=obj.color||"#000"; this.strokeStyle=obj.strokeStyle||"#000"; this.lineWidth=obj.lineWidth||5; this.scaleX=obj.scaleX||1; this.scaleY=obj.scaleY||1; } Track.prototype.draw=function(startX,startY,arr){ // context.save(); context.lineWidth=this.lineWidth; context.beginPath(); context.strokeStyle=this.strokeStyle; context.moveTo(startX,startY); for(var i=0;i<arr.length;i++){ context.lineTo(arr[i].endX,arr[i].endY); } context.stroke(); // context.restore(); }
4.执行循环动画的 wave.js
var canvas=document.querySelector("#canvas"); canvas.width=window.innerWidth; canvas.height=window.innerHeight; var context=canvas.getContext("2d"); //初始化参数 var centerX=40,centerY=canvas.height/2; //动画的起点坐标 var range=100; //小黄球上下运动的范围 var xspeed=2,yspeed=0.05; //小黄球在x,y轴上的运动速度 var angle=0; //上下运动所需的角度的初始值 var arr=[]; // 记录轨迹运动坐标的数组 //初始化track var track=new Track({}); //初始化ball var ball=new Ball({}); ball.x=centerX; ball.y=centerY; (function drawFrame(){ window.requestAnimationFrame(drawFrame); context.clearRect(0,0,canvas.width,canvas.height); ball.x+=xspeed; ball.y=centerY+Math.sin(angle)*range; angle+=yspeed; arr.push({endX:ball.x,endY:ball.y}); //绘制轨迹 track.draw(centerX,centerY,arr); //绘制小黄球 ball.draw(context,canvas); })();
