基于HTML5的Canvas動(dòng)畫(huà)設(shè)計(jì)教學(xué)的研究

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

關(guān)鍵詞：HTML5;Canvas;動(dòng)畫(huà)制作

中圖分類(lèi)號(hào)：TP312? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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中新增開(kāi)發(fā)跨平臺(tái)動(dòng)畫(huà)和游戲的一個(gè)重要元素，可以用于繪制圖形，合成制作照片或動(dòng)畫(huà)，能夠在Web頁(yè)面上對(duì)圖像和視頻進(jìn)行像素級(jí)操作。Canvas的動(dòng)畫(huà)應(yīng)用方向廣泛，例如，生產(chǎn)裝置實(shí)時(shí)監(jiān)測(cè)可視化、游戲開(kāi)發(fā)、地圖技術(shù)的進(jìn)步等。網(wǎng)絡(luò)傳輸速度快且可交互的Canvas元素特點(diǎn)，可用于挖掘游戲開(kāi)發(fā)的潛力。Canvas動(dòng)畫(huà)應(yīng)用具有良好的發(fā)展前景。

因應(yīng)社會(huì)發(fā)展和教學(xué)課程的需要，對(duì)Canvas元素展開(kāi)研究，以提升和豐富基于HTML5的Canvas動(dòng)畫(huà)教學(xué)的質(zhì)量與內(nèi)涵。在Canvas動(dòng)畫(huà)設(shè)計(jì)教學(xué)實(shí)踐中，結(jié)合Canvas的應(yīng)用功能，通過(guò)教學(xué)案例分析，使學(xué)生在學(xué)習(xí)實(shí)踐中逐步掌握Canvas動(dòng)畫(huà)的原理和制作方法，并進(jìn)一步拓展學(xué)生動(dòng)畫(huà)設(shè)計(jì)與制作的空間視野。特別是對(duì)高職院校的學(xué)生而言，學(xué)習(xí)與掌握應(yīng)用功能強(qiáng)大的Canvas動(dòng)畫(huà)元素，更有利于其增長(zhǎng)專(zhuān)業(yè)技能以及拓寬就業(yè)渠道。

1? Canvas概述

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

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

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

2? Canvas動(dòng)畫(huà)的實(shí)現(xiàn)

在Canvas畫(huà)布中制作動(dòng)畫(huà)，實(shí)現(xiàn)步驟分為繪制幀、清除和重繪三步。Canvas實(shí)現(xiàn)一個(gè)動(dòng)畫(huà)的過(guò)程，實(shí)際上是通過(guò)間隔時(shí)間繪制圖形和清除圖形的步驟，并通過(guò)定時(shí)循環(huán)操作來(lái)實(shí)現(xiàn)的。

Canvas為開(kāi)發(fā)者提供了自定義繪圖的接口，它只是一個(gè)空白的畫(huà)布，真正繪畫(huà)要在JavaScript程序中調(diào)用Canvas API接口來(lái)完成。所以在瀏覽器實(shí)現(xiàn)動(dòng)畫(huà)，必須利用Canvas標(biāo)簽畫(huà)布繪制所需的圖形，接著清空和在下一個(gè)位置重復(fù)前面的操作。通過(guò)設(shè)置時(shí)間，清空畫(huà)布以及算法變換圖形或圖片的位置，重復(fù)執(zhí)行便形成動(dòng)畫(huà)?？刹捎孟旅嫒N方法之一來(lái)實(shí)現(xiàn)。

setInterval（）

setTimeout（）

requestAnimationFrame（）

下面以采用setInterval（）方法為Canvas動(dòng)畫(huà)設(shè)計(jì)教學(xué)實(shí)例。

2.1? Canvas動(dòng)畫(huà)創(chuàng)建步驟

首先在頁(yè)面中利用Canvas元素定義畫(huà)布，使用JavaScript獲取網(wǎng)頁(yè)中的Canvas對(duì)象，然后使用該對(duì)象調(diào)用Canvas API進(jìn)行圖形的繪制或圖像的處理。

第一步，Canvas標(biāo)簽語(yǔ)法定義：

…

其中，id為Canvas元素的標(biāo)識(shí);height為Canvas畫(huà)布的高度，單位為像素;width為Canvas畫(huà)布的寬度，單位為像素。

該“畫(huà)布”默認(rèn)是無(wú)色透明的，通過(guò)style樣式可設(shè)置背景顏色或邊框等屬性顯示出“畫(huà)布”來(lái)，實(shí)現(xiàn)區(qū)域的可視化。

第二步，獲得Canvas對(duì)象。下文為代碼定義語(yǔ)法：

document.getElementById（對(duì)象id）

創(chuàng)建畫(huà)布后，使用document.getElementById（）方法獲取網(wǎng)頁(yè)中的對(duì)象，即獲取ID號(hào)對(duì)應(yīng)Canvas的訪問(wèn)權(quán)。

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

document.getContext（“2D”）;

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

用Canvas標(biāo)簽繪制實(shí)現(xiàn)動(dòng)畫(huà)的步驟為：

（1）預(yù)先編寫(xiě)好函數(shù)，即繪制圖形或圖像，在該函數(shù)用clearRect方法，根據(jù)需要擦除畫(huà)布局部或整體。

（2）定義圖形或圖像的移動(dòng)（或作為其他動(dòng)作函數(shù)的定義）。

（3）使用setInterval方法設(shè)置動(dòng)畫(huà)的間隔時(shí)間，反復(fù)執(zhí)行前面定義的函數(shù)。

（4）如果要停止循環(huán)，可利用clearInterval（）函數(shù)清空計(jì)時(shí)器。

setInterval函數(shù)是HTML5中自帶的函數(shù)，該函數(shù)相隔一段時(shí)間調(diào)用執(zhí)行一次函數(shù)。該函數(shù)有兩個(gè)參數(shù)，參數(shù)1表示要執(zhí)行動(dòng)畫(huà)的函數(shù)，參數(shù)2為時(shí)間間隔，單位為毫秒。

2.2? Canvas動(dòng)畫(huà)實(shí)現(xiàn)方法

使用Canvas API提供的裁切方法clip（）制作遮罩動(dòng)畫(huà)的HTML代碼為：

<！DOCTYPE html>

//設(shè)置一塊寬600，高600的畫(huà)布，圖片圓形展開(kāi)后收縮將在畫(huà)布內(nèi)滾動(dòng);

var d=10;

varrd=5;

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

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

varge = new Image（）;? ? ? ? ? //創(chuàng)建對(duì)象實(shí)例

ge.src = "web.jpeg";

ge.onload=function（）{

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

}

setInterval（"draw（）"，100）;? ? // setInterval（）方法中的draw（）表示執(zhí)行動(dòng)畫(huà)的函數(shù)，100為時(shí)間間隔，以100毫秒來(lái)調(diào)用函數(shù)draw（）

function draw（）

{

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

dx.save（）;? ? //在使用clip（）方法前，調(diào)用save（）方法對(duì)當(dāng)前畫(huà)布區(qū)域的狀態(tài)推送到棧中保存

dx.beginPath（）;? ? ? // beginPath（）函數(shù)為開(kāi)始路徑（或重置的當(dāng)前路徑）

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

dx.closePath（）;

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

dx.fill（）;? ? ? ? ? ? ?// 該方法填充當(dāng)前的圖像

dx.clip（）;//調(diào)用clip（）方法來(lái)設(shè)置從原始畫(huà)布中裁剪任意形狀區(qū)域

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

dx.restore（）; //restore（）方法將繪圖狀態(tài)恢復(fù)為save（）方法上一個(gè)保存的狀態(tài)從棧中彈出，所有設(shè)定都恢復(fù)

d=d+rd;

if （d>300） rd=-5;

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

}

運(yùn)行上述代碼，可得到圖1的遮罩動(dòng)畫(huà)截圖。

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

按照Setlnterval（）方法指定的周期重復(fù)地調(diào)用，直到clearlnterval（）被調(diào)用或窗口被關(guān)閉。

3? 結(jié)? 論

文章主要研究Canvas創(chuàng)建動(dòng)畫(huà)實(shí)現(xiàn)的步驟和方法，并通過(guò)Canvas API提供的裁切方法clip（）制作遮罩動(dòng)畫(huà)的教學(xué)實(shí)例展示，加深學(xué)生對(duì)Canvas創(chuàng)建動(dòng)畫(huà)基本方法的理解，以更好地掌握運(yùn)用Canvas實(shí)現(xiàn)更廣泛的動(dòng)畫(huà)制作和圖形繪制的技能。

當(dāng)然，Canvas創(chuàng)建動(dòng)畫(huà)的實(shí)現(xiàn)還存在缺憾。例如canvas實(shí)現(xiàn)動(dòng)畫(huà)創(chuàng)建的方法比較煩瑣，編程描繪難度比較大，相形之下，F(xiàn)lash的實(shí)現(xiàn)就方便多了。但是，不可否認(rèn)HTML5具有強(qiáng)大的生命力，在HTML5標(biāo)準(zhǔn)中新增的Canvas也得到越來(lái)越多設(shè)計(jì)開(kāi)發(fā)者的青睞，普及性與通用性都有所提升，運(yùn)用Canvas設(shè)計(jì)是未來(lái)的一大發(fā)展趨勢(shì)。

參考文獻(xiàn)：

[1] 王芳.基于HTML5的教學(xué)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [D].南昌：華東交通大學(xué)，2016.

[2] 趙志敏.基于HTML5和Node.js的在線教育系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn) [D].北京：北京交通大學(xué)，2016.

[3] 周恒，余丹.基于HTML5的圖形圖像協(xié)同處理技術(shù)分析 [J].無(wú)線互聯(lián)科技，2016（18）：69-70.

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

[5] 劉貴國(guó).Html+Javascript網(wǎng)頁(yè)制作與開(kāi)發(fā)完全手冊(cè) [M].北京：清華大學(xué)出版社，2014.

[6] 張曉蕾.網(wǎng)頁(yè)設(shè)計(jì)與制作教程：HTML+CSS+Javascript [M].北京：電子工業(yè)出版社，2014.

作者簡(jiǎn)介：林觀德（1954—），男，漢族，廣東廣州人，高級(jí)實(shí)驗(yàn)師，本科，研究方向：計(jì)算機(jī)應(yīng)用。