HTML5 Canvas动画效果实现原理

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

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

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

![328298e5-6460-4029-a277-1cd702a54b46.jpg][]

[在线演示][Link 1]

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

1.  function myAnimation() \{  
    
2.          ctx.clearRect(0, 0, canvas\_size\_x, canvas\_size\_y);  
    
3.    
    
4.          if (x\_icon < 0 || x\_icon > canvas\_size\_x - size\_x) \{  
    
5.                  stepX = -stepX;  
    
6.          \}  
    
7.            
    
8.          if (y\_icon < 0 || y\_icon > canvas\_size\_y - size\_y) \{  
    
9.                  stepY = -stepY;  
    
10.         \}  
    
11.   
    
12.         x\_icon += stepX;  
    
13.         y\_icon += stepY;  
    
14.   
    
15.         ctx.drawImage(anim\_img, x\_icon, y\_icon);  
    
16. \}

复制代码

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

1.  function draw() \{  
    
2.          var canvas = document.getElementById("canvas");  
    
3.          ctx = canvas.getContext("2d");  
    
4.            
    
5.          anim\_img = new Image(size\_x, size\_y);  
    
6.            
    
7.          anim\_img.onload = function() \{  
    
8.                  setInterval('myAnimation()', 5);  
    
9.          \}  
    
10.           
    
11.         anim\_img.src = 'http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png';  
    
12. \}

复制代码

以上方法将图形定义，并且调用实际绘制动画的方法，搞定！   
  
如果大家对于HTML5绘制动画有兴趣，或者希望了解如何模拟物理动画效果，请阅读下面的互动教程，相信能够帮助你更好理解HTML画布：   
  
[HTML5画布实现的粒子运动效果][HTML5 1]

[HTML5]: http://www.html5cn.org/
[328298e5-6460-4029-a277-1cd702a54b46.jpg]: http://bbs.html5cn.org/data/attachment/forum/201410/24/11321035d75zrmde3ogore.jpg
[Link 1]: http://www.gbtags.com/gb/demoviewer/4012/empty/3b172577-5c08-4704-8bfc-2e18116dc341.html.htm
[HTML5 1]: http://www.gbtags.com/gb/gbliblist/8.htm