canvas实现小球的抛物线运动
2017-03-21
看了一篇面经里面有道题是js实现小球沿抛物线运动；初看觉得挺简单的，就随手敲了一下；然而问题多多啊。。。。
1.canvas画出抛物线：
// 获取canvas
var canvas = document.getElementById('pao');
// 由canvas获取 绘图的上下文
var ctx =canvas.getContext('2d');
// context.quadraticCurveTo(cpx,cpy,x,y) 二元抛物线
// 参数
// cpx 贝塞尔控制点的 x 坐标
// cpy 贝塞尔控制点的 y 坐标
// x 结束点的 x 坐标
// y 结束点的 y 坐标
// context.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y) 三元抛物线
// 参数：
// cp1x 第一个贝塞尔控制点的 x 坐标
// cp1y 第一个贝塞尔控制点的 y 坐标
// cp2x 第二个贝塞尔控制点的 x 坐标
// cp2y 第二个贝塞尔控制点的 y 坐标
ctx.beginPath();//路径开始
ctx.moveTo(0,0);//开始点
ctx.quadraticCurveTo(100,200,200,0);
ctx.strokeStyle = "#0000ff";//线条颜色
ctx.lineWidth =2;//指定线条宽度
ctx.stroke();
2.js控制小球的位置：
主要想法是去控制小球的top，left;实现小球运动
难点在抛物线和小球运动轨迹的重合(这点我还没有折腾清楚这周末前弄明白)；
老是想偷懒用quadraticCurveTo去画抛物线结果小球运动的抛物线(也就是二阶贝尔赛曲线并不好求表达式)于是：
// 2.获取canvas duix
var canvas = document.getElementById('pao');
// 3.由canvas获取 绘图的上下文
var ctx = canvas.getContext('2d');
paowu(ctx);
function paowu(context) {
context.strokeStyle = "#0000ff";
context.lineWidth = 2;
for (let i = 0; i < 240; i++) {
context.lineTo(i, -i * i/46 + 3.4 * i);
}
context.stroke();
};
控制小球运动:
setInterval(play,800);
var x=0,y=0;
function play(){
var moving = document.getElementById("toll");
if(x<240&&y<200){
x+=1;y=-x * x/46 + 3.4 * x;
moving.style.top = y+"px";
moving.style.left = x+"px";
}else{
x=0;
y=0;
}
}
