梁敦毫 廣東茂名幼兒師范?？茖W(xué)校

一、引言

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

二、開發(fā)工具HBuilder 介紹

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

HBuilder 是DCloud（數(shù)字天堂）推出的一款支持HTML5 的Web 開發(fā)IDE?？?，是HBuilder 的最大優(yōu)勢(shì)，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css 的開發(fā)效率。

三、繪圖基本過程

1.創(chuàng)建Canvas 元素

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

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

2.繪圖

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

1)畫線

畫線是最容易實(shí)現(xiàn)的，通過指定線的開始和結(jié)束位置，來繪制一條線。該方法可以指定多個(gè)結(jié)束位置，并按順序繪制多條線段。

圖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 對(duì)象的方法獲取ID 為My_Canvas 的畫布元素：

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

接著，創(chuàng)建一個(gè)二維對(duì)象：

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

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

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

2)矩形

cavs.fillStyle="#00FF00"；

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

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

3) 畫圓

通過arc()方法來規(guī)定圓的位置、尺寸和形狀。我們分別以坐標(biāo)（90，80）和（180，80）為中心點(diǎn)，半徑都為30 的圓，結(jié)束角為Math.PI*2 繪制兩個(gè)圓，如圖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()方法，它們分別表示開始繪制路徑和結(jié)束繪制路徑。當(dāng)在畫布里繪制多個(gè)圖形時(shí)，就需要在繪制每一個(gè)圖形時(shí)，用這兩個(gè)方法告訴系統(tǒng)繪圖的開始和結(jié)束。否則系統(tǒng)會(huì)默認(rèn)這幾個(gè)繪圖是連續(xù)的，會(huì)在連個(gè)圖形間形成一條連線。例如這個(gè)案例繪完第一個(gè)圓后沒用closePath()結(jié)束繪圖，那么系統(tǒng)會(huì)把連個(gè)圓連成一體，結(jié)果如圖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) 表示繪制實(shí)心的文本

例如：；

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

圖4

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

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

圖5

5)圖片

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

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，并設(shè)置圖片坐標(biāo)為（15，15）；

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

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

四、結(jié)束語

HTML5作為新一代的HMTL標(biāo)準(zhǔn)，最大的優(yōu)勢(shì)是兼容移動(dòng)平臺(tái)。它的新增元素Canvas及其API接口可以輕松地繪制基本圖形，如路徑、圓、矩形等。同時(shí)Canvas 還可以給繪圖填充顏色，設(shè)置陰影，裁剪等效果，由于篇幅有限，這里不作詳細(xì)介紹。基于Canvas 繪圖的優(yōu)勢(shì)利用，該技術(shù)將大量被應(yīng)用于Web 開發(fā)，還有輕量級(jí)的游戲開發(fā)。