我用 Canvas 画了一个三 Angular 形,
http://jsfiddle.net/nicekiwi/GfM6M/
我想通过将三 Angular 形的一个 Angular 移离另外两个 Angular 来“展开”三 Angular 形的动画。
o---o---o
将动画设置为低于 0.8 秒或其他时间。
o
/ \
/ \
/ \
o-------o
我该怎么做?我能找到的所有教程都移动整个对象而不是其中的一个点。
我真的很想按顺序为其中一些开场动画制作动画,但希望我能自己解决这个问题。 :)
最佳答案
当您想要为 Canvas 制作动画时,您需要在帧中创建动画。绘制一帧,删除 Canvas ,然后绘制下一帧。
要获得正确的时间,您可以使用 setInterval定期执行函数。在传递给 setInterval 的函数中:
- 使用 context.clearRect 删除 Canvas
- 调整坐标
- 用新坐标绘制三 Angular 形
在你的下面添加这段代码就可以了:
var x = 300;
// execute a function every 50ms
window.setInterval( function() {
// erase the canvas
var context = document.getElementById('canvas').getContext('2d');
context.clearRect(0, 0, 900, 500);
// update the coordinates
x++;
if (x > 500) x = 300;
// redraw with new coordinates
draw_triangle('410','48',x,'86','420','135');
}, 50);
更专业的方法是使用 requestAnimationFrame而不是 setInterval ,它有很多优点。但这会使您的编程变得更加复杂,因为动画速度将取决于帧速率,您要么需要对此进行补偿,要么将逻辑与渲染分离。
关于javascript - HTML Canvas Animate 折叠三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20929003/