HTML5 的 Canvas 動畫基礎

Canvas 支援圖形描繪功能,搭配 JavaScript 提供的函式 setInterval() 便能達到動畫的效果,這一篇來看看最簡單的實作。以下是範例畫面,當畫面載入時,會反覆逐一動態呈現字串 HTML5 中的每一個字元:


為了呈現這個動畫,我們必須在畫面上配置一個 <canvas> 標籤。

<canvas id="pcanvas" width="300" height="150">    </canvas>

此標籤的識別 id 為 pcanvas ,接下來就可以利用 JavaScript 來取得此標籤的參照,然後描繪文字。

首先宣告需要的變數:

var f = ['H', 'T', 'M', 'L', '5'];
var a = 0;
var c, context;

f 是用來儲存所要描繪的 5 個字元, a 則是目前描繪的字元索引, c 是 <canvas> 標籤,而 context 則是負責描繪畫面。緊接著建立描繪文字需要的函式:

function drawText() {
    context.clearRect(0, 0, 300, 150);
    context.font = '72pt Arial';
    context.strokeText(f[a], 100, 100);  
    if (a < 4) a++;else a = 0;
}

一開始調用 clearRect() 清除畫面,指定所要描繪的文字字型,調用 strokeText() 取得目前描繪的字元,於座標點(100,100)進行描繪。最後的 if 判斷目前是否的索引是否小於 4 ,是的話遞增其索引值,否則將其歸零。

這是最簡單的動畫,重複清除並重繪畫面來達到動態的視覺效果,當你想要呈現動畫時,只要建立自己的描繪函式,然後調用 setInterval() 函式即可。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        var f = ['H', 'T', 'M', 'L', '5'];
        var a = 0;
        var c, context;
        window.onload = function () {
            c = document.getElementById('pcanvas');
            context = c.getContext('2d');
            setInterval(drawText, 750);
        };
        function drawText() {
            context.clearRect(0, 0, 300, 150);
            context.font = '72pt Arial';
            context.strokeText(f[a], 100, 100);  
            if (a < 4) a++;else a = 0;
        }
    </script>
</head>
<body>
    <canvas id="pcanvas" width="300" height="150">    </canvas>
</body>
</html>

相關連結


沒有留言: