李洪嬌
(作者單位:江蘇省廣播電視總臺(tái) 新聞中心)
HTML5 Canvas在2D動(dòng)畫設(shè)計(jì)中的運(yùn)用
李洪嬌
(作者單位:江蘇省廣播電視總臺(tái) 新聞中心)
Canvas元素作為最先進(jìn)的動(dòng)畫制作標(biāo)準(zhǔn),在HTMLS中也發(fā)揮著畫布作用,促進(jìn)了動(dòng)畫生產(chǎn)的順利進(jìn)行。對(duì)于特效、光柵、復(fù)雜的動(dòng)畫和矢量圖形,Canvas元素也能夠一一實(shí)現(xiàn)。對(duì)于Flash等其他制作2D動(dòng)畫的軟件來(lái)說(shuō),Canvas元素制作動(dòng)畫的步驟更加易懂,且便于操作。
HTML5;Canvas;2D動(dòng)畫技術(shù)
HTML(Hypertext Markup Language)超文本標(biāo)記語(yǔ)言的意義。HTML5的主要特點(diǎn)是簡(jiǎn)化了以前的HTML格式和腳本;添加大量語(yǔ)義標(biāo)簽;取消插件。HTML5提供的功能包括繪制、實(shí)時(shí)和跨源通信,通信,后臺(tái)處理,以及語(yǔ)義化并且可以驗(yàn)證的表單,音頻和視頻支持、地理定位功能、本地?cái)?shù)據(jù)存儲(chǔ)功能,離線應(yīng)用支持等。
2.1 Canvas標(biāo)簽的定義
要想在網(wǎng)絡(luò)中繪制一張圖片,首先必須創(chuàng)建一個(gè)相應(yīng)的畫布。創(chuàng)建畫布的方法是使用“畫布”選項(xiàng)卡來(lái)定義一個(gè)矩形區(qū)域。因此,所有的圖片,動(dòng)畫應(yīng)該從定義畫布標(biāo)簽開(kāi)始。Canvas畫布是以一種非常簡(jiǎn)單的方式定義的,基本的考慮因素包括畫布ID的定義,畫布高度的定義和畫布寬度的定義。在這里,畫布上的ID是界定,是為了下面的JavaScript能引用該畫布元素做準(zhǔn)備的?;菊Z(yǔ)句如下:
2.2 獲得Canvas對(duì)象并獲取2D渲染對(duì)象
使用canvas元素創(chuàng)建畫布后,下一步是使用JavaScript腳本語(yǔ)言。首先,讓JavaScript腳本語(yǔ)言到畫布的ID,使用getElementById()函數(shù)。一旦發(fā)現(xiàn)畫布對(duì)象,上下文初始化(即賦值)可以用來(lái)開(kāi)始在畫布對(duì)象中使用這個(gè)應(yīng)用的對(duì)象來(lái)繪制二維圖像對(duì)象。
獲得Canvas的對(duì)象為:
var c= document.getElementById ("myCanvas");
繪制二維渲染圖片對(duì)象:
c. getContext ("2d");
2.3 2D context API
2.3.1 基礎(chǔ)的線條繪制
矩形畫布是通過(guò)填充屬性填充風(fēng)格來(lái)實(shí)現(xiàn)的;線是通過(guò)應(yīng)用線條的屬性筆觸風(fēng)格來(lái)實(shí)現(xiàn)的。用于填充性能的填充顏色值從原來(lái)的CSS技術(shù)的繼承。
2.3.2 路徑的繪制方法
在畫布中使用路徑來(lái)繪制任意形狀的形狀。其基本思路是:先畫出圖形的基本輪廓,然后畫出邊框的圖形,最終應(yīng)用在填充函數(shù)上的圖形將被填充的顏色。
畫一個(gè)自定義的圖形也很方便簡(jiǎn)單?;痉椒ㄊ牵菏紫?,使用()調(diào)用定義開(kāi)始繪圖,然后用直線相關(guān)函數(shù)、曲線或自定義圖形繪制的圖對(duì)應(yīng)的形狀。然后使用填充功能來(lái)填充顏色繪制的圖和用腦卒中功能對(duì)圖形添加邊框效果,最后使用closepath功能完成繪圖操作。
3.1 實(shí)際案例分析
在這里,筆者以2015年端午節(jié)前夕某報(bào)社基于HTML5技術(shù),以玉林美食文化為背景,制作的一個(gè)場(chǎng)景式的小畫報(bào)為例,使用數(shù)據(jù)來(lái)說(shuō)明HTM L5在新型網(wǎng)絡(luò)下的傳播優(yōu)勢(shì)。
玉林美食節(jié)主題背景:玉林飲食文化。
主題表現(xiàn)形式:手機(jī)端場(chǎng)的景式。
主體風(fēng)格:中國(guó)風(fēng)。
總標(biāo)題:老玉林的正宗味道。
制作理念:用毛筆書(shū)法的中國(guó)風(fēng)格,寫一首童謠,導(dǎo)引內(nèi)容,每秒輸出一行,直到所有的顯示內(nèi)容完整,停留3秒,主題為“老玉林的正宗味道”慢慢顯示的味道,有背景音樂(lè),整個(gè)動(dòng)畫的時(shí)刻顯示。當(dāng)?shù)谝粋€(gè)場(chǎng)景加載時(shí),用戶需要通過(guò)手指滑動(dòng)屏幕,顯示下一頁(yè)的內(nèi)容,以提高觀眾的參與和熱情。在內(nèi)容布局上,也盡量在一個(gè)頁(yè)面內(nèi)會(huì)有一個(gè)小的章節(jié)來(lái)顯示內(nèi)容。同時(shí),在生產(chǎn)過(guò)程中,一方面要考慮用戶的開(kāi)放速度問(wèn)題,另一方面要考慮用戶的手機(jī)屏幕大小不同的問(wèn)題。為此,主要優(yōu)化了以下幾點(diǎn)。
一是圖片格式為PNG,以保證圖片的質(zhì)量,圖片尺寸控制在一定范圍內(nèi),適合網(wǎng)絡(luò)通信與傳播。
二是當(dāng)頁(yè)面加載時(shí),通過(guò)預(yù)加載技術(shù),根據(jù)用戶的手機(jī)屏幕的尺寸來(lái)決定頁(yè)面的大小,然后自動(dòng)伸展,確保用戶屏幕上全屏顯示網(wǎng)頁(yè)內(nèi)容,在不同的手機(jī)端顯示達(dá)到相同的效果。
3.2 體驗(yàn)效果的反饋
經(jīng)過(guò)多個(gè)移動(dòng)客戶端和一個(gè)不同的網(wǎng)絡(luò)環(huán)境測(cè)試,工作取得了預(yù)期的效果。該出版社發(fā)表在當(dāng)?shù)氐奈⑿殴娖脚_(tái),18:00后發(fā)布,截至22:00數(shù)據(jù)顯示,將近16 000人的游客數(shù)量,超過(guò)1 000人分享,達(dá)到滿意的效果,且受到了很多受眾的贊美。
本次做的畫刊,只是一個(gè)小小的嘗試,但經(jīng)過(guò)數(shù)據(jù)比較后可以發(fā)現(xiàn),目前的讀者更容易接受HTML5的傳播方式,只要分享通信信息的價(jià)值,讀者可以分享到自己的群體。
[1]李慧云,何震葦,李麗,等.HTML5技術(shù)與應(yīng)用模式研究[J].電信科學(xué),2012(5).
[2]劉斌.HTML5-未來(lái)網(wǎng)絡(luò)應(yīng)用的核心技術(shù)研究[J].自動(dòng)化與儀器儀表,2010(4).
[3]楊林.HTML5:移動(dòng)端新聞媒體的新選擇[J].新聞世界,2015(5).
[4]劉子揚(yáng).淺談HTML5技術(shù)在新媒體上的應(yīng)用[J].視聽(tīng),2016(3).