基于HTML5 Canvas 繪圖技術應用研究

梁敦毫 廣東茂名幼兒師范專科學校

一、引言

HTML5 自2014 年10 發布以來，正逐步取代原有的標準，實現夸平臺的無縫對接。在HTML5 出現之前，Web 開發者主要是通過flash 插件實現Web 繪畫，flash 不僅降低了Web 的交互性，大量的添加會嚴重影響Web 的性能，同時flash 內容不能被搜索引擎檢索，更麻煩的是瀏覽器必須安裝flash 插件才能正常顯示。Canvas是HTML5 新增元素，可以利用JavaScript 調用Canvas 相應的API，實現動態的繪圖及渲染。為適應社會的需求，學校開設了專門的HTML5 課程，為做好HTML5 的教學工作，特對Canvas 繪圖進行探究。

二、開發工具HBuilder 介紹

目前主流的前端開發工具有以Windows notepad 為代表的純文本編輯器，以及HBuilder、Deamweaver、WebStorm、Vscode、Brackets 等集成開發環境，適合H5 的只有HBuilder、Brackets 和WebStorm，本文是采用HBuilder 作為開發工具。

HBuilder 是DCloud（數字天堂）推出的一款支持HTML5 的Web 開發IDE。快，是HBuilder 的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css 的開發效率。

三、繪圖基本過程

1.創建Canvas 元素

向HTML5 網頁添加Canvas 元素，并設置元素的id 為My_Canvas，設置畫布的寬度為300 像素，高度為300 像素，同時給它添加實線邊框。

＜canvas id="My_Canvas" width="300" height="300"style="border：2px solid #5C5C5C；" ＞＜/canvas＞

2.繪圖

Canvas 是HTML5 新增元素，可以在HTML上創建一個畫布，但它不具備繪圖能力，要完成繪圖，需要借助JavaScript。通過調用相應的API 可以實現繪制路徑、矩形、圓、字符、添加圖像以及手繪圖形。下面將從不同的繪圖方式分別介紹：

1)畫線

畫線是最容易實現的，通過指定線的開始和結束位置，來繪制一條線。該方法可以指定多個結束位置，并按順序繪制多條線段。

圖1

JavaScript 代碼如下：

＜script type="text/javascript"＞

var a=document.getElementById("My_Canvas")；

var cavs=a.getContext("2d")；

cavs.moveTo(50，50)；

cavs.lineTo(250，150)；

cavs.lineTo(250，250)；

cavs.lineTo(150，150)；

cavs.stroke()；＜/script＞

首先，使用document 對象的方法獲取ID 為My_Canvas 的畫布元素：

var cavs =document.getElementById("My_Canvas ")；

接著，創建一個二維對象：

var cavs =c.getContext("2d")；

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

在Canvas上要實現繪線，需要指定開始點和結束點的坐標，再繪制線條。指定開始坐標用moveTo(x，y)方法；指定結束點用lineTo(x，y)方法；繪制線條使用stroke()方法。實例中（如圖1 所示），有四個坐標點，A（50，50）是起點，B（250，150）是第一個結束點，C（250，250）是第二個結束點，D（150，150）是第三個結束點，然后利用stroke()方法繪制四個點間的三條線。

2)矩形

cavs.fillStyle="#00FF00"；

cavs.fillRect(50，50，180，150)；

fillStyle 方法是用于填充顏色的，這里是給圖形填充綠色。fillRect 方法是規定形狀、位置和尺寸的。fillRect 方法共有4 個參數，（50，50）是要繪制的矩形左上角的x 軸和y 軸的坐標，180 是矩形的寬度，150 是矩形的高度。

3) 畫圓

通過arc()方法來規定圓的位置、尺寸和形狀。我們分別以坐標（90，80）和（180，80）為中心點，半徑都為30 的圓，結束角為Math.PI*2 繪制兩個圓，如圖2。

cavs.beginPath()；

cavs.arc(90，80，30，0，Math.PI*2，true)；

cavs.closePath()；

cavs.stroke()；

cavs.beginPath()；

cavs.arc(180，80，30，0，Math.PI*2，true)；

cavs.stroke()；

cavs.closePath()；

圖2

此處用beginPath()方法和closePath()方法，它們分別表示開始繪制路徑和結束繪制路徑。當在畫布里繪制多個圖形時，就需要在繪制每一個圖形時，用這兩個方法告訴系統繪圖的開始和結束。否則系統會默認這幾個繪圖是連續的，會在連個圖形間形成一條連線。例如這個案例繪完第一個圓后沒用closePath()結束繪圖，那么系統會把連個圓連成一體，結果如圖3 所示。

cavs.beginPath()；

cavs.arc(90，80，30，0，Math.PI*2，true)；

cavs.arc(180，80，30，0，Math.PI*2，true)；

cavs.stroke()；

cavs.closePath()；

圖3

4)文本

使用canvas 繪制文本，主要用到以下屬性：

font - 定義字體

例如：cavs.font="50px 華文行楷"；定義了字體為“華文行楷”，高為50 像素。

fillText(text，x，y) 表示繪制實心的文本

例如：；

cavs.fillText("歡迎！"，60，100)；；在坐標（60，100）的位置繪制了實心的文本“歡迎！”，效果如圖4 所示：

圖4

strokeText(text，x，y) -表示繪制空心的文本

例如：strokeText("歡迎！"，60，100)； 在坐標（60，100）的位置繪制了空心的文本“歡迎！”，效果如圖5 所示：

圖5

5)圖片

Canvas 支持把圖片放在畫布上，它通過drawImage()方法來實現，下面通過一個實例來介紹具體的實現。

var c=document.getElementById("My_Canvas")；

var cavs =c.getContext("2d")；

var imgs = new Image()；

imgs.src = "images/image.jpg"；

imgs onload = function(){

cavs.drawImage(imgs，15，15)；

cavs.drawImage(imgs ，150，10，150，160)；

cavs.drawImage(imgs，15，15，55，55，210，10，150，150)；

}；

drawImage()方法有三種不同的用法：

context.drawImage(imgs，15，15)；在畫布上添加圖片imgs，并設置圖片坐標為（15，15）；

context.drawImage(imgs ，150，10，150，160)； 在畫布上添加圖片imgs，設置圖片坐標為（150，10），并規定圖片的寬為150，高為160；

context.drawImage(imgs，15，15，55，65，210，10，150，150) ；剪切圖片，并在畫布上定位被剪切的部分，被剪切的起始坐標為（15，15），被剪切圖片的寬度為55，高度為65。

四、結束語

HTML5作為新一代的HMTL標準，最大的優勢是兼容移動平臺。它的新增元素Canvas及其API接口可以輕松地繪制基本圖形，如路徑、圓、矩形等。同時Canvas 還可以給繪圖填充顏色，設置陰影，裁剪等效果，由于篇幅有限，這里不作詳細介紹。基于Canvas 繪圖的優勢利用，該技術將大量被應用于Web 開發，還有輕量級的游戲開發。