如何使对象围绕html5 canvas中的点
moroccan_dev
下图展示了该问题 
换句话说，如何精确计算每一帧的x和y坐标？
ctx.arc(x,y,radius,0,pi*2,false)
因为在增加一个坐标之后，我有一个如何计算另一个坐标的问题
我试过了但是没用
var step=2,x=100,y=100,r=50,coordinates=[[x,y-r]];
for(var i=1;i <r;i+=step){
bx=x;
x+=step;
y=y-Math.sqrt(Math.pow(r,2)-Math.pow(bx-x,2))
coordinates[i]=[x,y];
}
jsfiddle将不胜感激。
亚历山大大帝
var canvas = document.querySelector("#c");
var ctx = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var speed = 10; // Lower is faster
function animate(t){
ctx.save();
ctx.clearRect (0 , 0 ,canvas.width ,canvas.height );
ctx.translate(canvas.width/2, canvas.height/2);
// First circle
ctx.beginPath();
ctx.arc(0, 0, 5, 0, 2 * Math.PI, false);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();
// rotate + move along
ctx.rotate((t/speed)/100);
ctx.translate(100,0);
// Orbiting cirle
ctx.beginPath();
ctx.arc(0, 0, 10, 0, 2 * Math.PI, false);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
ctx.restore();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);canvas {
border: 1px solid black;
}<canvas id="c" width="512" height="512"></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使对象围绕html5 canvas中的点
- 2
在 HTML5 Canvas 中旋转对象
- 3
HTML5 Canvas 围绕中心旋转渐变
- 4
HTML5 Canvas：如何枚举所有对象
- 5
如何增加HTML5 canvas中JS对象的旋转角度？
- 6
在HTML5 Canvas中拖放多个对象
- 7
如何在html5的localStorage对象中存储数组？
- 8
如何在html5的localStorage对象中存储数组？
- 9
HTML5围绕其中心点旋转文本
- 10
如何从XMLHttpRequest响应中设置HTML5 canvas ImageData？
- 11
HTML5如何在Canvas中调用图像
- 12
如何清除Canvas中的特定行：HTML5
- 13
如何使用JavaScript在HTML5 Canvas中绘制圆？
- 14
HTML5如何在Canvas中调用图像
- 15
HTML5 Canvas绘制点之间的线距
- 16
HTML5 Canvas，如何显示两点之间的动画攻击
- 17
HTML5 Canvas中的计时
- 18
html5 canvas中的旋转逻辑
- 19
如何清除canvas html5？
- 20
如何清除canvas html5？
- 21
如何使用jQuery淡入和淡出HTML5 canvas ctx对象？
- 22
在HTML5 Canvas中的两个或多个对象之间应用重力
- 23
HTML5 Canvas-移动对象的最佳做法
- 24
如何在angular js和html5中显示来自javascript对象的特定代码的名称
- 25
如何在html5画布中前后移动圆形对象？
- 26
如何使用HTML5表单数据对象在数组中制作多个文件？
- 27
如何在angular js和html5中显示来自javascript对象的特定代码的名称
- 28
如何使用HTML5中的动态x，y值生成Canvas移动波？
- 29
如何将渐变的底部锚定到HTML5 Canvas中填充的容器？
我来说两句