在線演示

使用HTML5畫布能夠幫助我們快速實現簡單的動畫效果，基本原理如下：

每隔一定時間繪制圖形并且清除圖形，用來模擬出一個動畫過程，可以使用context.clearRect(0, 0, x, y)方法來刷新需要繪制的圖形

首先是繪制圖形的方法，如下：

function myAnimation() {ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);if (x_icon < 0 || x_icon > canvas_size_x - size_x) {stepX = -stepX;}if (y_icon < 0 || y_icon > canvas_size_y - size_y) {stepY = -stepY;}x_icon += stepX;y_icon += stepY;ctx.drawImage(anim_img, x_icon, y_icon); }

以上方法每隔一定時間清除畫布內容，并且重新計算繪制圖形位置，一旦超過了畫布大小，則反轉坐標繪制圖形。

下面是實際繪制圖形方法：

function draw() {var canvas = document.getElementById("canvas");ctx = canvas.getContext("2d");anim_img = new Image(size_x, size_y);anim_img.onload = function() {setInterval('myAnimation()', 5);}anim_img.src = 'http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png'; }

以上方法將圖形定義，并且調用實際繪制動畫的方法，搞定！

如果大家對于HTML5繪制動畫有興趣，或者希望了解如何模擬物理動畫效果，請閱讀下面的互動教程，相信能夠幫助你更好理解HTML畫布：

總結

以上是生活随笔為你收集整理的HTML5 Canvas动画效果实现原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。