李洪嬌

（作者單位：江蘇省廣播電視總臺(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ù)

1 HTML5概述

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 HTML5Canvas的核心語(yǔ)法

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 HTML5在新媒體上的使用實(shí)例

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).