HTML5 Canvas在2D動畫設計中的運用

李洪嬌

（作者單位：江蘇省廣播電視總臺 新聞中心）

HTML5 Canvas在2D動畫設計中的運用

李洪嬌

（作者單位：江蘇省廣播電視總臺 新聞中心）

Canvas元素作為最先進的動畫制作標準，在HTMLS中也發揮著畫布作用，促進了動畫生產的順利進行。對于特效、光柵、復雜的動畫和矢量圖形，Canvas元素也能夠一一實現。對于Flash等其他制作2D動畫的軟件來說，Canvas元素制作動畫的步驟更加易懂，且便于操作。

HTML5；Canvas；2D動畫技術

1 HTML5概述

HTML（Hypertext Markup Language）超文本標記語言的意義。HTML5的主要特點是簡化了以前的HTML格式和腳本；添加大量語義標簽；取消插件。HTML5提供的功能包括繪制、實時和跨源通信，通信，后臺處理，以及語義化并且可以驗證的表單，音頻和視頻支持、地理定位功能、本地數據存儲功能，離線應用支持等。

2 HTML5Canvas的核心語法

2.1 Canvas標簽的定義

要想在網絡中繪制一張圖片，首先必須創建一個相應的畫布。創建畫布的方法是使用“畫布”選項卡來定義一個矩形區域。因此，所有的圖片，動畫應該從定義畫布標簽開始。Canvas畫布是以一種非常簡單的方式定義的，基本的考慮因素包括畫布ID的定義，畫布高度的定義和畫布寬度的定義。在這里，畫布上的ID是界定，是為了下面的JavaScript能引用該畫布元素做準備的。基本語句如下：

2.2 獲得Canvas對象并獲取2D渲染對象

使用canvas元素創建畫布后，下一步是使用JavaScript腳本語言。首先，讓JavaScript腳本語言到畫布的ID，使用getElementById（）函數。一旦發現畫布對象，上下文初始化（即賦值）可以用來開始在畫布對象中使用這個應用的對象來繪制二維圖像對象。

獲得Canvas的對象為：

var c= document.getElementById ("myCanvas");

繪制二維渲染圖片對象：

c. getContext ("2d");

2.3 2D context API

2.3.1 基礎的線條繪制

矩形畫布是通過填充屬性填充風格來實現的；線是通過應用線條的屬性筆觸風格來實現的。用于填充性能的填充顏色值從原來的CSS技術的繼承。

2.3.2 路徑的繪制方法

在畫布中使用路徑來繪制任意形狀的形狀。其基本思路是：先畫出圖形的基本輪廓，然后畫出邊框的圖形，最終應用在填充函數上的圖形將被填充的顏色。

畫一個自定義的圖形也很方便簡單。基本方法是：首先，使用（）調用定義開始繪圖，然后用直線相關函數、曲線或自定義圖形繪制的圖對應的形狀。然后使用填充功能來填充顏色繪制的圖和用腦卒中功能對圖形添加邊框效果，最后使用closepath功能完成繪圖操作。

3 HTML5在新媒體上的使用實例

3.1 實際案例分析

在這里，筆者以2015年端午節前夕某報社基于HTML5技術，以玉林美食文化為背景，制作的一個場景式的小畫報為例，使用數據來說明HTM L5在新型網絡下的傳播優勢。

玉林美食節主題背景：玉林飲食文化。

主題表現形式：手機端場的景式。

主體風格：中國風。

總標題：老玉林的正宗味道。

制作理念：用毛筆書法的中國風格，寫一首童謠，導引內容，每秒輸出一行，直到所有的顯示內容完整，停留3秒，主題為“老玉林的正宗味道”慢慢顯示的味道，有背景音樂，整個動畫的時刻顯示。當第一個場景加載時，用戶需要通過手指滑動屏幕，顯示下一頁的內容，以提高觀眾的參與和熱情。在內容布局上，也盡量在一個頁面內會有一個小的章節來顯示內容。同時，在生產過程中，一方面要考慮用戶的開放速度問題，另一方面要考慮用戶的手機屏幕大小不同的問題。為此，主要優化了以下幾點。

一是圖片格式為PNG，以保證圖片的質量，圖片尺寸控制在一定范圍內，適合網絡通信與傳播。

二是當頁面加載時，通過預加載技術，根據用戶的手機屏幕的尺寸來決定頁面的大小，然后自動伸展，確保用戶屏幕上全屏顯示網頁內容，在不同的手機端顯示達到相同的效果。

3.2 體驗效果的反饋

經過多個移動客戶端和一個不同的網絡環境測試，工作取得了預期的效果。該出版社發表在當地的微信公眾平臺，18：00后發布，截至22：00數據顯示，將近16 000人的游客數量，超過1 000人分享，達到滿意的效果，且受到了很多受眾的贊美。

本次做的畫刊，只是一個小小的嘗試，但經過數據比較后可以發現，目前的讀者更容易接受HTML5的傳播方式，只要分享通信信息的價值，讀者可以分享到自己的群體。

[1]李慧云,何震葦,李麗,等.HTML5技術與應用模式研究[J].電信科學,2012(5).

[2]劉斌.HTML5-未來網絡應用的核心技術研究[J].自動化與儀器儀表,2010(4).

[3]楊林.HTML5:移動端新聞媒體的新選擇[J].新聞世界,2015(5).

[4]劉子揚.淺談HTML5技術在新媒體上的應用[J].視聽,2016(3).