基于HTML5的Canvas動畫設計教學的研究

摘? 要：HTML5新增的Canvas元素，它是一種像素級別的位圖繪圖技術，實現較為簡便，不需要安裝插件，大部分瀏覽器都支持該技術。Canvas元素的功能也較為強大，除了可用于任意圖形和動畫的繪制外，與云技術相結合起來，還可用于巨型復雜圖形的繪制。文章對基于HTML5的Canvas進行研究，主要針對Canvas API提供的裁切方法clip（）創建遮罩動畫，通過Canvas動畫設計教學實例步驟的詳細展示，使學生在學習中逐步掌握Canvas動畫的原理和制作方法，進而提高學生動畫設計與制作的技能技巧。

關鍵詞：HTML5;Canvas;動畫制作

中圖分類號：TP312? ? ? ?文獻標識碼：A 文章編號：2096-4706（2021）02-0063-03

Abstract：Canvas element added in HTML5 is a pixel level bitmap drawing technology，which is easy to implement and does not need to install plug-ins. Most browsers support this technology. Canvas element is also powerful. In addition to drawing arbitrary graphics and animation，combined with cloud technology，it can also be used to draw giant complex graphics. This paper studies the Canvas based on HTML5，mainly aiming at the clipping method clip（） provided by Canvas API to create mask animation. Through the detailed display of the steps of Canvas animation design teaching examples，students can gradually master the principles and production methods of Canvas animation in learning，and then improve their animation design and production skills.

Keywords：HTML5;Canvas;animation production

0? 引? 言

Canvas元素是HTML5中新增開發跨平臺動畫和游戲的一個重要元素，可以用于繪制圖形，合成制作照片或動畫，能夠在Web頁面上對圖像和視頻進行像素級操作。Canvas的動畫應用方向廣泛，例如，生產裝置實時監測可視化、游戲開發、地圖技術的進步等。網絡傳輸速度快且可交互的Canvas元素特點，可用于挖掘游戲開發的潛力。Canvas動畫應用具有良好的發展前景。

因應社會發展和教學課程的需要，對Canvas元素展開研究，以提升和豐富基于HTML5的Canvas動畫教學的質量與內涵。在Canvas動畫設計教學實踐中，結合Canvas的應用功能，通過教學案例分析，使學生在學習實踐中逐步掌握Canvas動畫的原理和制作方法，并進一步拓展學生動畫設計與制作的空間視野。特別是對高職院校的學生而言，學習與掌握應用功能強大的Canvas動畫元素，更有利于其增長專業技能以及拓寬就業渠道。

1? Canvas概述

HTML5標準中新增的Canvas元素繪制圖形，功能非常強大，不需要在服務器端上運行。通過JavaScript可以得到網頁中的Canvas對象，并獲取該對象二維（2D）的上下文，通過2D上下文可以調用Canvas API繪制圖形。可以繪制盒、圓、路徑、字符以及添加圖像等功能。Canvas最早由蘋果引入一個開源的瀏覽器引擎（WebKit），用戶在Mac OS X WebKit中創建控制板部件，后來又在Safari和Google Chrome等瀏覽器中采用了Canvas技術。Canvas技術也得到了Web超文本標準化應用技術工作組采納為新一代的Web標準化開發技術。在HTML5版本前，網頁Web是用SVC、VML技術繪制圖形的，SVG、VML實現一個矢量圖形是通過XML可擴展標記語言繪圖來完成的，矢量圖形再不能滿足當今移動設備的需要。而在HTML5中新增一個Canvas元素，從而提供了各種繪圖函數，這讓繪圖變得更加簡單，可以在Web頁面直接生成位圖級別圖像，滿足了現代移動設備位圖級別圖像的需求。

總而言之，在HTML5版本之前，在瀏覽器中繪制圖形相對來說是比較困難的，HTML5中新增了Canvas元素后，繪制二維圖形就變得極其容易了。

但Canvas也有不足之處。Canvas的位圖畫布與分辨率有關，在不同的分辨率下Canvas繪制圖形有所不同，Canvas也不支持事件處理。

2? Canvas動畫的實現

在Canvas畫布中制作動畫，實現步驟分為繪制幀、清除和重繪三步。Canvas實現一個動畫的過程，實際上是通過間隔時間繪制圖形和清除圖形的步驟，并通過定時循環操作來實現的。

Canvas為開發者提供了自定義繪圖的接口，它只是一個空白的畫布，真正繪畫要在JavaScript程序中調用Canvas API接口來完成。所以在瀏覽器實現動畫，必須利用Canvas標簽畫布繪制所需的圖形，接著清空和在下一個位置重復前面的操作。通過設置時間，清空畫布以及算法變換圖形或圖片的位置，重復執行便形成動畫。可采用下面三種方法之一來實現。

setInterval（）

setTimeout（）

requestAnimationFrame（）

下面以采用setInterval（）方法為Canvas動畫設計教學實例。

2.1? Canvas動畫創建步驟

首先在頁面中利用Canvas元素定義畫布，使用JavaScript獲取網頁中的Canvas對象，然后使用該對象調用Canvas API進行圖形的繪制或圖像的處理。

第一步，Canvas標簽語法定義：

…

其中，id為Canvas元素的標識;height為Canvas畫布的高度，單位為像素;width為Canvas畫布的寬度，單位為像素。

該“畫布”默認是無色透明的，通過style樣式可設置背景顏色或邊框等屬性顯示出“畫布”來，實現區域的可視化。

第二步，獲得Canvas對象。下文為代碼定義語法：

document.getElementById（對象id）

創建畫布后，使用document.getElementById（）方法獲取網頁中的對象，即獲取ID號對應Canvas的訪問權。

第三步，獲得id對象的2D渲染上下文對象。下文為代碼定義方法：

document.getContext（“2D”）;

使用getContext方法獲取canvas元素的上下文。

用Canvas標簽繪制實現動畫的步驟為：

（1）預先編寫好函數，即繪制圖形或圖像，在該函數用clearRect方法，根據需要擦除畫布局部或整體。

（2）定義圖形或圖像的移動（或作為其他動作函數的定義）。

（3）使用setInterval方法設置動畫的間隔時間，反復執行前面定義的函數。

（4）如果要停止循環，可利用clearInterval（）函數清空計時器。

setInterval函數是HTML5中自帶的函數，該函數相隔一段時間調用執行一次函數。該函數有兩個參數，參數1表示要執行動畫的函數，參數2為時間間隔，單位為毫秒。

2.2? Canvas動畫實現方法

使用Canvas API提供的裁切方法clip（）制作遮罩動畫的HTML代碼為：

<！DOCTYPE html>

//設置一塊寬600，高600的畫布，圖片圓形展開后收縮將在畫布內滾動;

var d=10;

varrd=5;

var dc=document.getElementById（"yC"）;

var dx=dc.getContext（"2d"）;

varge = new Image（）;? ? ? ? ? //創建對象實例

ge.src = "web.jpeg";

ge.onload=function（）{

dx.drawImage（ge，0，0）;? ? ?// drawImage（）方法在畫布上定位（x，y）圖像

}

setInterval（"draw（）"，100）;? ? // setInterval（）方法中的draw（）表示執行動畫的函數，100為時間間隔，以100毫秒來調用函數draw（）

function draw（）

{

dx.clearRect（0，0，600，600）; // clearRect（）方法清空給定矩形內的指定像素。

dx.save（）;? ? //在使用clip（）方法前，調用save（）方法對當前畫布區域的狀態推送到棧中保存

dx.beginPath（）;? ? ? // beginPath（）函數為開始路徑（或重置的當前路徑）

dx.arc（300，300，d，0，Math.PI*2，true）;? //arc（）方法用于創建圓

dx.closePath（）;

dx.fillStyle="yellow";? ?//該屬性設置用于填充繪畫的顏色、漸變或模式

dx.fill（）;? ? ? ? ? ? ?// 該方法填充當前的圖像

dx.clip（）;//調用clip（）方法來設置從原始畫布中裁剪任意形狀區域

dx.drawImage（ge，0，0）;? //把圖形繪制到指定的坐標

dx.restore（）; //restore（）方法將繪圖狀態恢復為save（）方法上一個保存的狀態從棧中彈出，所有設定都恢復

d=d+rd;

if （d>300） rd=-5;

else if （d<=0） rd=5;

}

運行上述代碼，可得到圖1的遮罩動畫截圖。

在該程序中，dx.clearRect（0，0，600，600）非常重要，clearRect（）方法清空給定矩形內的指定像素。setInterval（code，millisec）每次的調用，首先清理畫布原有的內容，再將新的圖像繪制到新的位置，code參數表示要調用的函數或代碼，millisec參數表示周期性執行的時間間隔。

按照Setlnterval（）方法指定的周期重復地調用，直到clearlnterval（）被調用或窗口被關閉。

3? 結? 論

文章主要研究Canvas創建動畫實現的步驟和方法，并通過Canvas API提供的裁切方法clip（）制作遮罩動畫的教學實例展示，加深學生對Canvas創建動畫基本方法的理解，以更好地掌握運用Canvas實現更廣泛的動畫制作和圖形繪制的技能。

當然，Canvas創建動畫的實現還存在缺憾。例如canvas實現動畫創建的方法比較煩瑣，編程描繪難度比較大，相形之下，Flash的實現就方便多了。但是，不可否認HTML5具有強大的生命力，在HTML5標準中新增的Canvas也得到越來越多設計開發者的青睞，普及性與通用性都有所提升，運用Canvas設計是未來的一大發展趨勢。

參考文獻：

[1] 王芳.基于HTML5的教學系統的設計與實現 [D].南昌：華東交通大學，2016.

[2] 趙志敏.基于HTML5和Node.js的在線教育系統的設計和實現 [D].北京：北京交通大學，2016.

[3] 周恒，余丹.基于HTML5的圖形圖像協同處理技術分析 [J].無線互聯科技，2016（18）：69-70.

[4] 梁敦毫.基于HTML5 Canvas繪圖技術應用研究 [J].數碼世界，2020（4）：102-103.

[5] 劉貴國.Html+Javascript網頁制作與開發完全手冊 [M].北京：清華大學出版社，2014.

[6] 張曉蕾.網頁設計與制作教程：HTML+CSS+Javascript [M].北京：電子工業出版社，2014.

作者簡介：林觀德（1954—），男，漢族，廣東廣州人，高級實驗師，本科，研究方向：計算機應用。