【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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>

相關連結


沒有留言: