基于HTML5的Canvas動畫設(shè)計(jì)教學(xué)的研究
2021-07-28 08:31林觀德
現(xiàn)代信息科技 2021年2期
關(guān)鍵詞：動畫制作
摘? 要：HTML5新增的Canvas元素，它是一種像素級別的位圖繪圖技術(shù)，實(shí)現(xiàn)較為簡便，不需要安裝插件，大部分瀏覽器都支持該技術(shù)。Canvas元素的功能也較為強(qiáng)大，除了可用于任意圖形和動畫的繪制外，與云技術(shù)相結(jié)合起來，還可用于巨型復(fù)雜圖形的繪制。文章對基于HTML5的Canvas進(jìn)行研究，主要針對Canvas API提供的裁切方法clip（）創(chuàng)建遮罩動畫，通過Canvas動畫設(shè)計(jì)教學(xué)實(shí)例步驟的詳細(xì)展示，使學(xué)生在學(xué)習(xí)中逐步掌握Canvas動畫的原理和制作方法，進(jìn)而提高學(xué)生動畫設(shè)計(jì)與制作的技能技巧。
關(guān)鍵詞：HTML5;Canvas;動畫制作
中圖分類號：TP312? ? ? ?文獻(xiàn)標(biāo)識碼：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中新增開發(fā)跨平臺動畫和游戲的一個重要元素，可以用于繪制圖形，合成制作照片或動畫，能夠在Web頁面上對圖像和視頻進(jìn)行像素級操作。Canvas的動畫應(yīng)用方向廣泛，例如，生產(chǎn)裝置實(shí)時監(jiān)測可視化、游戲開發(fā)、地圖技術(shù)的進(jìn)步等。網(wǎng)絡(luò)傳輸速度快且可交互的Canvas元素特點(diǎn)，可用于挖掘游戲開發(fā)的潛力。Canvas動畫應(yīng)用具有良好的發(fā)展前景。
因應(yīng)社會發(fā)展和教學(xué)課程的需要，對Canvas元素展開研究，以提升和豐富基于HTML5的Canvas動畫教學(xué)的質(zhì)量與內(nèi)涵。在Canvas動畫設(shè)計(jì)教學(xué)實(shí)踐中，結(jié)合Canvas的應(yīng)用功能，通過教學(xué)案例分析，使學(xué)生在學(xué)習(xí)實(shí)踐中逐步掌握Canvas動畫的原理和制作方法，并進(jìn)一步拓展學(xué)生動畫設(shè)計(jì)與制作的空間視野。特別是對高職院校的學(xué)生而言，學(xué)習(xí)與掌握應(yīng)用功能強(qiáng)大的Canvas動畫元素，更有利于其增長專業(yè)技能以及拓寬就業(yè)渠道。
1? Canvas概述
HTML5標(biāo)準(zhǔn)中新增的Canvas元素繪制圖形，功能非常強(qiáng)大，不需要在服務(wù)器端上運(yùn)行。通過JavaScript可以得到網(wǎng)頁中的Canvas對象，并獲取該對象二維（2D）的上下文，通過2D上下文可以調(diào)用Canvas API繪制圖形?？梢岳L制盒、圓、路徑、字符以及添加圖像等功能。Canvas最早由蘋果引入一個開源的瀏覽器引擎（WebKit），用戶在Mac OS X WebKit中創(chuàng)建控制板部件，后來又在Safari和Google Chrome等瀏覽器中采用了Canvas技術(shù)。Canvas技術(shù)也得到了Web超文本標(biāo)準(zhǔn)化應(yīng)用技術(shù)工作組采納為新一代的Web標(biāo)準(zhǔn)化開發(fā)技術(shù)。在HTML5版本前，網(wǎng)頁Web是用SVC、VML技術(shù)繪制圖形的，SVG、VML實(shí)現(xiàn)一個矢量圖形是通過XML可擴(kuò)展標(biāo)記語言繪圖來完成的，矢量圖形再不能滿足當(dāng)今移動設(shè)備的需要。而在HTML5中新增一個Canvas元素，從而提供了各種繪圖函數(shù)，這讓繪圖變得更加簡單，可以在Web頁面直接生成位圖級別圖像，滿足了現(xiàn)代移動設(shè)備位圖級別圖像的需求。
總而言之，在HTML5版本之前，在瀏覽器中繪制圖形相對來說是比較困難的，HTML5中新增了Canvas元素后，繪制二維圖形就變得極其容易了。
但Canvas也有不足之處。Canvas的位圖畫布與分辨率有關(guān)，在不同的分辨率下Canvas繪制圖形有所不同，Canvas也不支持事件處理。
2? Canvas動畫的實(shí)現(xiàn)
在Canvas畫布中制作動畫，實(shí)現(xiàn)步驟分為繪制幀、清除和重繪三步。Canvas實(shí)現(xiàn)一個動畫的過程，實(shí)際上是通過間隔時間繪制圖形和清除圖形的步驟，并通過定時循環(huán)操作來實(shí)現(xiàn)的。
Canvas為開發(fā)者提供了自定義繪圖的接口，它只是一個空白的畫布，真正繪畫要在JavaScript程序中調(diào)用Canvas API接口來完成。所以在瀏覽器實(shí)現(xiàn)動畫，必須利用Canvas標(biāo)簽畫布繪制所需的圖形，接著清空和在下一個位置重復(fù)前面的操作。通過設(shè)置時間，清空畫布以及算法變換圖形或圖片的位置，重復(fù)執(zhí)行便形成動畫?？刹捎孟旅嫒N方法之一來實(shí)現(xiàn)。
setInterval（）
setTimeout（）
requestAnimationFrame（）
下面以采用setInterval（）方法為Canvas動畫設(shè)計(jì)教學(xué)實(shí)例。
2.1? Canvas動畫創(chuàng)建步驟
首先在頁面中利用Canvas元素定義畫布，使用JavaScript獲取網(wǎng)頁中的Canvas對象，然后使用該對象調(diào)用Canvas API進(jìn)行圖形的繪制或圖像的處理。
第一步，Canvas標(biāo)簽語法定義：
其中，id為Canvas元素的標(biāo)識;height為Canvas畫布的高度，單位為像素;width為Canvas畫布的寬度，單位為像素。
該“畫布”默認(rèn)是無色透明的，通過style樣式可設(shè)置背景顏色或邊框等屬性顯示出“畫布”來，實(shí)現(xiàn)區(qū)域的可視化。
第二步，獲得Canvas對象。下文為代碼定義語法：
document.getElementById（對象id）
創(chuàng)建畫布后，使用document.getElementById（）方法獲取網(wǎng)頁中的對象，即獲取ID號對應(yīng)Canvas的訪問權(quán)。
第三步，獲得id對象的2D渲染上下文對象。下文為代碼定義方法：
document.getContext（“2D”）;
使用getContext方法獲取canvas元素的上下文。
用Canvas標(biāo)簽繪制實(shí)現(xiàn)動畫的步驟為：
（1）預(yù)先編寫好函數(shù)，即繪制圖形或圖像，在該函數(shù)用clearRect方法，根據(jù)需要擦除畫布局部或整體。
（2）定義圖形或圖像的移動（或作為其他動作函數(shù)的定義）。
（3）使用setInterval方法設(shè)置動畫的間隔時間，反復(fù)執(zhí)行前面定義的函數(shù)。
（4）如果要停止循環(huán)，可利用clearInterval（）函數(shù)清空計(jì)時器。
setInterval函數(shù)是HTML5中自帶的函數(shù)，該函數(shù)相隔一段時間調(diào)用執(zhí)行一次函數(shù)。該函數(shù)有兩個參數(shù)，參數(shù)1表示要執(zhí)行動畫的函數(shù)，參數(shù)2為時間間隔，單位為毫秒。
2.2? Canvas動畫實(shí)現(xiàn)方法
使用Canvas API提供的裁切方法clip（）制作遮罩動畫的HTML代碼為：
<！DOCTYPE html>
//設(shè)置一塊寬600，高600的畫布，圖片圓形展開后收縮將在畫布內(nèi)滾動;
var d=10;
varrd=5;
var dc=document.getElementById（"yC"）;
var dx=dc.getContext（"2d"）;
varge = new Image（）;? ? ? ? ? //創(chuàng)建對象實(shí)例
ge.src = "web.jpeg";
ge.onload=function（）{
dx.drawImage（ge，0，0）;? ? ?// drawImage（）方法在畫布上定位（x，y）圖像
}
setInterval（"draw（）"，100）;? ? // setInterval（）方法中的draw（）表示執(zhí)行動畫的函數(shù)，100為時間間隔，以100毫秒來調(diào)用函數(shù)draw（）
function draw（）
{
dx.clearRect（0，0，600，600）; // clearRect（）方法清空給定矩形內(nèi)的指定像素。
dx.save（）;? ? //在使用clip（）方法前，調(diào)用save（）方法對當(dāng)前畫布區(qū)域的狀態(tài)推送到棧中保存
dx.beginPath（）;? ? ? // beginPath（）函數(shù)為開始路徑（或重置的當(dāng)前路徑）
dx.arc（300，300，d，0，Math.PI*2，true）;? //arc（）方法用于創(chuàng)建圓
dx.closePath（）;
dx.fillStyle="yellow";? ?//該屬性設(shè)置用于填充繪畫的顏色、漸變或模式
dx.fill（）;? ? ? ? ? ? ?// 該方法填充當(dāng)前的圖像
dx.clip（）;//調(diào)用clip（）方法來設(shè)置從原始畫布中裁剪任意形狀區(qū)域
dx.drawImage（ge，0，0）;? //把圖形繪制到指定的坐標(biāo)
dx.restore（）; //restore（）方法將繪圖狀態(tài)恢復(fù)為save（）方法上一個保存的狀態(tài)從棧中彈出，所有設(shè)定都恢復(fù)
d=d+rd;
if （d>300） rd=-5;
else if （d<=0） rd=5;
}