随笔分类 -  Web

web上实现起点到终点的抛物线轨迹运动——补充
摘要：上一篇实现了起点到终点的抛物线运动，终点坐标为x2，y2由于我们需要的是画一条漂亮的弧线为了简化计算可以将终点设置为0，y2。抛物线的方程为y = p * (x-a)2设起始点坐标为x1，y1终点坐标为0，y2则有y1=p * (x1-a)2y2=p * a2可简化出公式p = ((sqrt(y1) + sqrt(y2)) / x1)2a = sqrt(y1/ p)根据公式可以得到x y值，从而画出抛物线，可以通过addX，addY调整抛物线的位置代码如下: 1 <html> 2 <head> 3 <script type="text/javascrip 阅读全文
posted @ 2012-02-23 14:58 通灵宝玉 阅读(999) 评论(0) 推荐(1)
web上实现起点到终点的抛物线轨迹运动
摘要：需求：在web上实现一个div层按照投篮过程篮球运动轨迹运动。在web上实现一个div层的移动很简单，只需要将该div的position设置为absolute后改变其top和left就可以改变此div层在页面的位置。投篮过程篮球运动轨迹可以近似看成抛物线运动，此处的难点在于从起点到终点做抛物线轨迹的运动。web使用的是坐标系的第一象限，其上点的坐标都为正数。抛物线的方程为y = p * (x-a)2 + b一条抛物线轨迹可以由3点唯一确定，现在我们已知起点和终点，再找出一点就可以画出一条抛物线。我们将抛物线的顶点设置在x轴上这样我们得到抛物线的方程为y = p * (x-a)2设起始点坐标为x 阅读全文
posted @ 2012-02-22 16:27 通灵宝玉 阅读(1228) 评论(1) 推荐(0)