HTML5 Canvas动画效果实现原理

小灰灰 2022-08-07 09:57 386阅读 0赞

使用HTML5画布能够帮助我们快速实现简单的动画效果，基本原理如下：

每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形

328298e5-6460-4029-a277-1cd702a54b46.jpg

在线演示

首先是绘制图形的方法，如下：

  1. function myAnimation() {

  2. ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);

  4. if (x_icon < 0 || x_icon > canvas_size_x - size_x) {

  5. stepX = -stepX;

  6. }

  8. if (y_icon < 0 || y_icon > canvas_size_y - size_y) {

  9. stepY = -stepY;

  10. }

  12. x_icon += stepX;

  13. y_icon += stepY;

  15. ctx.drawImage(anim_img, x_icon, y_icon);

  16. }

复制代码

以上方法每隔一定时间清除画布内容，并且重新计算绘制图形位置，一旦超过了画布大小，则反转坐标绘制图形。

下面是实际绘制图形方法：

  1. function draw() {

  2. var canvas = document.getElementById(“canvas”);

  3. ctx = canvas.getContext(“2d”);

  5. anim_img = new Image(size_x, size_y);

  7. anim_img.onload = function() {

  8. setInterval(‘myAnimation()’, 5);

  9. }

  11. anim_img.src = ‘http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png‘;

  12. }

复制代码

以上方法将图形定义，并且调用实际绘制动画的方法，搞定！

如果大家对于HTML5绘制动画有兴趣，或者希望了解如何模拟物理动画效果，请阅读下面的互动教程，相信能够帮助你更好理解HTML画布：

HTML5画布实现的粒子运动效果

发表评论

表情：
评论列表 （有 0 条评论，386人围观）

还没有评论，来说两句吧...

相关阅读