canvas小球绕斜椭圆轨迹运动

在MDN web docs中有过关于使用canvas来绘制太阳系动画的例子，此种方法需要使用translate来不断改变画布原点。

MDN示例参考：太阳系运动示例

现在需要在canvas画布上绘制一个小球绕椭圆转动的动画效果

首先可以使用js 构造函数模式定义一个小球对象

function ball(x, y, obj) {this.x = x;this.y = y;this.angle = 0;this.draw = function() {var self = this;ctx.drawImage(obj, self.x, self.y);}
};

x和y代表绘制小球在画布上的坐标
angle代表小球绕中心点运动的角度值，最大为360。在动画绘制过程中，当角度等于360时让角度置为0。
obj为需要绘制的小球

通过以下代码将小球绘制在画布上

<style type="text/css">#mycanvas {margin: 80px;border: 1px solid black;}
</style>
<canvas id="mycanvas" width="500" height="500"></canvas><script type="text/javascript">var canvas = document.getElementById('mycanvas');var ctx = canvas.getContext('2d');var imgball = new Image(); // 创建img元素imgball.src = './img/Canvas_earth.png';imgball.onload = function() {ctx.drawImage(imgball, 200, 100);}function ball(x, y, obj) {this.x = x;this.y = y;this.angle = 0;this.draw = function() {var self = this;ctx.drawImage(obj, self.x, self.y);}};var ball01 = new ball(167, 100, imgball);function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);ball01.draw();}
</script>

ctx.clearRect(0, 0, canvas.width, canvas.height);可以清除画布之前的轨迹

效果：

接下来可以让小球做正椭圆轨迹运动，小球的直径是24，半径是12

<script type="text/javascript">var canvas = document.getElementById('mycanvas');var ctx = canvas.getContext('2d');var imgball = new Image(); // 创建img元素imgball.src = './img/Canvas_earth.png';imgball.onload = function() {ctx.drawImage(imgball, 200, 100);}function ball(x, y, obj) {this.x = x;this.y = y;this.angle = 0;this.draw = function() {var self = this;ctx.drawImage(obj, self.x, self.y);}};var ball01 = new ball(167, 100, imgball);var P0 = 0, P1 = 0, Z0 = 9 ,Z1 = 3;function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);if (ball01.angle == 360) {ball01.angle = 0;}ball01.angle += 1; //角度var radian = ball01.angle * (Math.PI / 180); //弧度ball01.x = (167 + 140 * Math.cos(radian)) - 24 / 2;   //小球半径ball01.y = (100 + 40 * Math.sin(radian)) - 24 / 2;ball01.draw();raf = window.requestAnimationFrame(draw);}draw();
</script>

效果：

而斜椭圆则是相当于正椭圆相对于中心原点旋转一定角度后形成的

斜椭圆x,y坐标点的计算公式：

当前代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><title></title><style type="text/css">#mycanvas {margin: 80px;border: 1px solid black;}</style></head><body><canvas id="mycanvas" width="500" height="500"></canvas><script type="text/javascript">var canvas = document.getElementById('mycanvas');var ctx = canvas.getContext('2d');var imgball = new Image(); // 创建img元素imgball.src = './img/Canvas_earth.png';function ball(x, y, obj) {this.x = x;this.y = y;this.angle = 0;this.draw = function() {var self = this;ctx.drawImage(obj, self.x, self.y);}};var ball01 = new ball(167, 100, imgball);function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);if (ball01.angle == 360) {ball01.angle = 0;}ball01.angle += 1; //角度var radian = ball01.angle * (Math.PI / 180); //弧度var nx = (167 + 140 * Math.cos(radian)) - 24 / 2;var ny = (100 + 40 * Math.sin(radian)) - 24 / 2;ball01.x = nx * Math.cos(-1 / 6 * Math.PI) - ny * Math.sin(-1 / 6 * Math.PI) - 50;ball01.y = nx * Math.sin(-1 / 6 * Math.PI) + ny * Math.cos(-1 / 6 * Math.PI) + 80;ball01.draw();raf = window.requestAnimationFrame(draw);}draw();</script></body>
</html>

效果：

如果不进行轨迹消除，那么形成的椭圆就如下图所示：

canvas小球绕斜椭圆轨迹运动相关推荐

自创银河系，转转转转转----Java球类的椭圆轨迹运动----立体效果
每次看到3D电影,我们都容易心血澎湃.在2D的屏幕,纸张上,体现出3D效果,一直是人们研究的方向,而今天就让以球为例来完成吧. 星系在实现项目之前我们要明白如何画出一个立体球 for(int i = ...
canvas小球绕大球转动动画
<!DOCTYPE html> <html> <head> <title>html拖拽事件</title> <script src=' ...
java 椭圆轨迹运动,java – 使用bouncycastle的椭圆曲线点加法
我的问题非常简单:我需要使用Java在Fp上添加两个点.一旦java api缺少一些ecc utils我就会使用bouncycastle. 以下是使用的公式: P + Q = -R α = (yq - ...
canvas 多个小球绕椭圆轨道转动
canvas实现小球绕轨道转动,并点击某一个后可以加速运动到指定位置,第一次使用canvas做动画,代码有些乱 = =,话不多说看代码,拷贝添加图片可以直接运行 canvas椭圆轨道运动 // An ...
canvas进阶——贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
写在最前在之前的这篇文章中我们提到了对于贝塞尔公式的运用.本次分享一下如何推导贝塞尔公式以及附一个简单的?即小球跟随曲线轨迹运动. 欢迎关注我的博客,不定期更新中-- 效果预览 demo地址对于如 ...
canvas轨迹运动, 利用向量实现点匀速运动
最近做了一个人员轨迹运动的需求, 来分享下代码. <!DOCTYPE html> <html lang="en"> <head><meta ...
ae制作小球轨迹运动_在AE里如何让物体沿着路径运动？
如何让物体精确的沿着路径轨迹运动, 手动K帧也能创造出曲线运动,但控制比较麻烦,而且不精确, 用钢笔绘制运动路径可以精确的让物体沿着路径运动,控制简单. 一.创建物体 1.新建一个AE合成,选择HDT ...
小球沿不同轨迹运动时水平方向速度的比较
探讨一个问题这两天网络流行如图的一个演示问题: 有点像伽利略匹萨斜塔试验,打破了一些常识:走曲线的小球反而速度更快,奇怪也哉. 粗略的数值模拟问题的分析用到的都是简单物理原理,只是计算繁琐一些,但 ...
小折腾：JavaScript与元素间的抛物线轨迹运动
小折腾:JavaScript与元素间的抛物线轨迹运动这篇文章发布于 2013年12月30日,星期一,20:40,归类于 js实例. 阅读 61147 次, 今日 55 次 by zhangxinxu ...
Android Animation实现元素在屏幕上按照指定轨迹运动，以及出现NullPointerException的解决方案
因项目需要,在Android中实现了一个动画,当在Activity中点击特定按钮时,会在屏幕上添加一个ImageView,并按照指定的起点.终点,沿着特定的轨迹运动(例如直线). 实现方法实现思路是 ...

canvas小球绕斜椭圆轨迹运动

canvas小球绕斜椭圆轨迹运动相关推荐

最新文章

热门文章