所以我有点困惑我怎样才能使一个形状动画的画布中心。我能得到的中心值:动画画布形状从任何位置居中
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight,
centerX = width/2,
centerY = height/2;
和一个简单的递减或递增根据初始位置是正的还是负的可以做,以及:
var x = 100;
var y = 100;
function fn(){
ctx.beginPath();
ctx.arc(x, y, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = '#444';
ctx.fill();
ctx.closePath();
x -= 1;
y -= 1;
}
动画将使用来完成:
requestAnimationFrame(fn)
所有这一切的问题是。我需要每次手动调整x和y。我怎么能更好地简单地使x和y值随形状变化,并使其对中心有动画效果,而不管从哪个方向以及初始位置是否定或正面。我想到的是atang2,但是老实说我不完全确定。
我有一个新的jsfiddle。我是否也在正确的轨道上? http://jsfiddle.net/4zmnrwzj/2/ – Asperger
我明白了,我以前从未使用过sqrt,总是想知道为什么要使用它。 – Asperger
我需要一些帮助来理解距离部分的工作原理。例如,为什么乘tx等tx等 – Asperger