HTML5干貨整理詳解canvas的學(xué)習(xí)方法及學(xué)習(xí)曲線（收藏保存）

記得在過(guò)去的Web前端開(kāi)發(fā)中，如果你需要繪圖或者生成相關(guān)圖形的話，使用Flash可能是你唯一或者說(shuō)最強(qiáng)大的實(shí)現(xiàn)方式，而在近些年的技術(shù)熱點(diǎn)HTML5標(biāo)準(zhǔn)中，（畫(huà)布）能夠更加方便的幫助你實(shí)現(xiàn)2D繪制圖形圖像及其各種動(dòng)畫(huà)效果功能。

首先我們先來(lái)了解一下什么是HTML Canvas？

我們可以在HTML中使用屬性width和height來(lái)定義Canvas。但是實(shí)現(xiàn)Canvas的相關(guān)功能主要還依賴于Javascript實(shí)現(xiàn)，即HTML5 Canvas API。我們使用javascript來(lái)訪問(wèn)和控制Canvas相關(guān)的區(qū)域，比如調(diào)用相關(guān)繪圖的方法，用來(lái)動(dòng)態(tài)的生成需要的動(dòng)畫(huà)或者圖形。

接下來(lái)我們來(lái)看看canvas的特性：

互動(dòng)性：Canvas支持互動(dòng)，可以很好的響應(yīng)用戶的操作，我們可以通過(guò)Javascript來(lái)監(jiān)鍵盤(pán)，鼠標(biāo)，及其觸摸設(shè)備相關(guān)事件。

動(dòng) 畫(huà)：任何被canvas繪制的圖形都可以添加動(dòng)畫(huà)，簡(jiǎn)單的彈跳球或者復(fù)雜的HTML5游戲都可以實(shí)現(xiàn)

靈活性：開(kāi)發(fā)人員可以使用Canvas來(lái)繪制任何的內(nèi)容，比如，直線，圖形，文字，圖片等，可以包含動(dòng)畫(huà)或者不包含。同時(shí)你可以添加音頻或者視頻瀏覽器支持：幾乎所有的現(xiàn)代瀏覽器都支持，并且被廣泛的各種設(shè)備支持，例如，桌面，平板，智能手機(jī)等等。

流行度：canvas目前很流行，很多的開(kāi)發(fā)人員都使用它來(lái)開(kāi)發(fā)類似游戲或者繪圖類應(yīng)用

web標(biāo)準(zhǔn)：只需要有瀏覽器就可以運(yùn)行，而非flash或者silverlight，需要安裝相關(guān)的插件

開(kāi)發(fā)一次，任何瀏覽器都可以運(yùn)行（當(dāng)然，不包括老式瀏覽器）

可以使用免費(fèi)擁有大量的開(kāi)發(fā)工具及其類庫(kù)。

使用HTML5 Canvas我們能開(kāi)發(fā)那些相關(guān)產(chǎn)品或者應(yīng)用呢？

1 可視化數(shù)據(jù)：各類統(tǒng)計(jì)圖表，比如:百度的echart

2 場(chǎng)景秀：用Canvas實(shí)現(xiàn)動(dòng)態(tài)的廣告效果能夠非常融洽的跨平臺(tái)運(yùn)行。如:手機(jī)中微產(chǎn)品.在移動(dòng)端兼容性很好。

3 游戲：canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas成為HTML5小游戲開(kāi)發(fā)首選。現(xiàn)階段h5做游戲,營(yíng)業(yè)方式不是很明確. 25 超棒的 HTML5 Canvas 游戲。

4 其他可嵌入網(wǎng)站的內(nèi)容 (多用于活動(dòng)頁(yè)面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。

5 趨勢(shì)=> 模擬器：無(wú)論從視覺(jué)效果還是核心功能方面來(lái)說(shuō)，模擬器產(chǎn)品可以完全由JavaScript來(lái)實(shí)現(xiàn)。模擬真實(shí)硬件環(huán)境,如移動(dòng)端各種類型手機(jī).

6 趨勢(shì)=> 遠(yuǎn)程計(jì)算機(jī)控制： Canvas可以讓開(kāi)發(fā)者更好地實(shí)現(xiàn)基于Web的數(shù)據(jù)傳輸，構(gòu)建一個(gè)完美的可視化控制界面。

7 趨勢(shì)=> 圖形編輯器： Photoshop圖形編輯器將能夠100%基于Web實(shí)現(xiàn)。

如何使用HTML5 Canvas？

使用HTML5 canvas其實(shí)非常簡(jiǎn)單，每一個(gè)canvas都擁有一個(gè)上下文（context）。使用它你可以來(lái)調(diào)用相關(guān)的畫(huà)布方法。

<p>您的瀏覽器不支持HTML5 Canvas</p>

</canvas>

以上代碼我們?cè)贖TML中添加了一個(gè)canvas標(biāo)簽，如果瀏覽器不支持canvas，會(huì)顯示<p>標(biāo)簽的內(nèi)容，當(dāng)然，如果你需要支持老式瀏覽器你也可以使用flash或者其它方法來(lái)做一個(gè)替代的解決方案。

var canvas = document.getElementById('mycanvas'),

context = canvas.getContext('2d');

以上代碼我們通過(guò)canvas取到2D的context。

在HTML5 Canvas的2D結(jié)構(gòu)中，坐標(biāo)（0,0）在左上方，這和傳統(tǒng)的坐標(biāo)不太一樣。大家需要注意一下，如下圖所示：

下面來(lái)說(shuō)一下canvas的API：

canvas的主要屬性和方法：

save():保存當(dāng)前環(huán)境的狀態(tài)

restore():返回之前保存過(guò)的路徑狀態(tài)和屬性

createEvent()

getContext():返回一個(gè)對(duì)象，指出訪問(wèn)繪圖功能必要的API

toDateURL():返回canvas圖像的URL

顏色、樣式和陰影屬性和方法：

fillStyle:設(shè)置或返回用于填充繪畫(huà)的顏色、漸變或模式

strokeStyle:設(shè)置或返回用于筆觸的顏色、漸變或模式

shadowColor:設(shè)置或返回用于陰影的顏色

shadowBlur:設(shè)置或返回用于陰影的模糊級(jí)別

shadowOffsetX:設(shè)置或返回陰影距形狀的水平距離

shadowOffsetY:設(shè)置或返回陰影距形狀的垂直距離

createLinearGradient():創(chuàng)建線性漸變（用在畫(huà)布內(nèi)容上）

createPattern():在指定的方向上重復(fù)指定的元素

createRadialGradient():創(chuàng)建放射狀/環(huán)形的漸變（用在畫(huà)布內(nèi)容上）

addColorStop():規(guī)定漸變對(duì)象中的顏色和停止位置

線條樣式屬性和方法

lineCap:設(shè)置或返回線條的結(jié)束端點(diǎn)樣式

lineJoin:設(shè)置或返回兩條線相交時(shí)，所創(chuàng)建的拐角類型

lineWidth:設(shè)置或返回當(dāng)前的線段寬度

miterLimit:設(shè)置或返回最大斜接長(zhǎng)度

Canvas的API-路徑方法

fill():填充當(dāng)前繪圖(路徑)

stroke():繪制已定義的路徑

beginPath():起始一條路徑，或重置當(dāng)前路徑

moveTo():把路徑移動(dòng)到畫(huà)布中的指定點(diǎn)，不創(chuàng)建線條

closePath():創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑

lineTo():添加一個(gè)新點(diǎn)，創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條

clip():從原始畫(huà)布剪切任意形狀和尺寸的區(qū)域

quadraticCurveTo():創(chuàng)建二次貝塞爾曲線

bezierCurveTo():創(chuàng)建三次貝塞爾曲線

arc():創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）

arcTo():創(chuàng)建兩切線之間的弧/曲線

isPointInPath():如果指定的點(diǎn)位于當(dāng)前路徑中，返回布爾值

Canvas的API-轉(zhuǎn)換方法

scale():縮放當(dāng)前繪圖至更大或更小

rotate():旋轉(zhuǎn)當(dāng)前繪圖

translate():重新映射畫(huà)布上的（0，0）位置

transform():替換繪圖的當(dāng)前轉(zhuǎn)換矩陣

setTransform():將當(dāng)前轉(zhuǎn)換重置為單位矩陣，然后運(yùn)行transform（）

Canvas的API-文本屬性和方法

font:設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性

textAlign:設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式

textBaseline:設(shè)置或返回在繪制文本時(shí)使用的的當(dāng)前文本基線

fillText():在畫(huà)布上繪制"被填充的"文本

strokeText():在畫(huà)布上繪制文本（無(wú)填充）

measureText():返回包含指定文本寬度的對(duì)象

Canvas的API-圖像繪制方法

drawImage():向畫(huà)布上繪制圖像、畫(huà)布或視頻

Canvas的API-像素操作方法和屬性

width:返回ImageData對(duì)象的寬度

height:返回ImageData對(duì)象的高度

data:返回一個(gè)對(duì)象，其包含指定的ImageData對(duì)象的圖像數(shù)據(jù)

createImageData():創(chuàng)建新的、空白的I馬哥Data對(duì)象

getImageData():返回ImageData對(duì)象，該對(duì)象為畫(huà)布上指定的矩形復(fù)制像素?cái)?shù)據(jù)

putImageData():把圖像數(shù)據(jù)（從指定的ImageData對(duì)象）放回畫(huà)布上

Canvas的API-圖像合成屬性

globalAlpha:設(shè)置或返回繪圖的當(dāng)前alpha或透明值

globalCompositeOperation:設(shè)置或返回新圖像如何繪制到已有的圖像上

快速高效的創(chuàng)建HTML5畫(huà)布圖形？

直接使用Canvas來(lái)繪制圖形相對(duì)來(lái)說(shuō)比較乏味并且麻煩，所以在現(xiàn)代的HTML5 Canvas中我們使用一些現(xiàn)成的第三方類庫(kù)幫助我們多快好省的實(shí)現(xiàn)圖形繪制的功能：Echart.js

Canvas里，所有圖形都繪制在幀上，繪制方法不會(huì)將繪制好的圖形元素作為一個(gè)返回值輸出，js也無(wú)法獲取到已經(jīng)繪制好的圖形元素，在Canvas中繪制的圖形都是一個(gè)整體。

假設(shè)用Canvas繪制了一個(gè)圖形，要判斷一個(gè)事件是否發(fā)生在該圖形上，有個(gè)isPointInPath方法，但是該方法僅判斷當(dāng)前上下文環(huán)境中的路徑，所以當(dāng)Canvas里已經(jīng)繪制了多個(gè)圖形時(shí)，僅能以最后一個(gè)圖形的上下文環(huán)境來(lái)判斷事件。這種問(wèn)題的解決方法是：當(dāng)事件發(fā)生時(shí)，重繪所有圖形，每繪制一個(gè)就使用isPointInPath方法，判斷事件坐標(biāo)是否在該圖形覆蓋范圍內(nèi)。當(dāng)圖形過(guò)多時(shí)，為了在性能和視覺(jué)效果上達(dá)到更好的效果，我們可以采取一種數(shù)學(xué)方法。

多個(gè)矩形框

如圖，紅色部分是由很多個(gè)矩形框拼接而成的平滑區(qū)域。需求是當(dāng)鼠標(biāo)移至矩形框上時(shí)出現(xiàn)文本提示框來(lái)顯示當(dāng)前是第幾個(gè)矩形。下圖是這些矩形框的坐標(biāo)：

坐標(biāo)

接下來(lái)繪制矩形框：

繪制

判斷一個(gè)點(diǎn)是否在矩形框內(nèi)的數(shù)學(xué)方法為：假設(shè)點(diǎn)為o，矩形為abcd，如果Soab+Sobc+Socd+Soda=Sabcd，則該點(diǎn)在矩形框內(nèi)，否則不在。

判斷

涉及到的函數(shù)有：計(jì)算兩點(diǎn)之間距離、計(jì)算三角形面積、判斷點(diǎn)是否在矩形內(nèi)。當(dāng)鼠標(biāo)移動(dòng)的時(shí)候，循環(huán)判斷鼠標(biāo)坐標(biāo)點(diǎn)是否在矩形框內(nèi)，在的話就出現(xiàn)提示框。為了減少判斷、提高性能，創(chuàng)建一個(gè)函數(shù)用于計(jì)算矩形框的水平跨度，即X軸范圍，當(dāng)目標(biāo)點(diǎn)不在該范圍內(nèi)就不做是否在矩形框內(nèi)的判斷。

事件處理程序

其中minmax是一個(gè)二維數(shù)組，保存著所有矩形框的X軸跨度。

當(dāng)條件成立時(shí)，效果如下，即顯示文本：

效果

tml5 canvas動(dòng)畫(huà)教程：下雪效果

利用canvas，實(shí)現(xiàn)一個(gè)下雪的效果，我們先預(yù)覽下效果：

我們先分析下這個(gè)效果：

1，隨機(jī)產(chǎn)生雪花

2，雪花的產(chǎn)生不是同時(shí)產(chǎn)生，而是有先后順序的

3，雪花怎么表示

4，怎么源源不斷的下雪

5，雪花有大有小

搞清楚上面幾個(gè)問(wèn)題之后，這個(gè)效果基本上就實(shí)現(xiàn)了，

首先，由于這個(gè)是全屏效果，我采用動(dòng)態(tài)創(chuàng)建canvas，把整個(gè)瀏覽器的寬與高賦值給canvas

調(diào)用oCanvas對(duì)象的init方法之后，就會(huì)在body的最后面追加一個(gè)canvas，id為canvas，寬、高與瀏覽器的寬、高相同，背景為黑色，晚上下雪的效果

接下來(lái)，有了舞臺(tái)，演員該上場(chǎng)了，怎么產(chǎn)生雪花呢？這里把下雪相關(guān)的操作，封裝成一個(gè)類，他的基本結(jié)構(gòu)如下：

var Snow = function(){}

Snow.prototype = {

init : function(){},

draw : function( cxt ) {},

update : function(){}

}

這個(gè)類一共有三個(gè)方法( init, draw, update ).

init：初始化雪花的位置( x, y 坐標(biāo) )、速度、半徑( 雪花的大小，在這里我們把雪花用半徑不同的圓表示）

那么init 加上這個(gè)random函數(shù) 就可以完成雪花的初始化

1，雪花出來(lái)的時(shí)候，一般是在屏幕的最上方出現(xiàn)的，所以雪花的y坐標(biāo)都是0, 其次，雪花的x坐標(biāo)是隨機(jī)的，他的范圍是從屏幕的左邊到右邊，那么就是 0 ~ width. 這個(gè)width就是canvas的寬度，也就是瀏覽器的寬度

2，雪花的半徑r, 設(shè)置為1 ~ 5之間的任意值

3，雪花下降的速度設(shè)置為3 ~ 5之間的隨機(jī)速度，這里我做的下雪是垂直方向往下飄，你可以拓展，考慮風(fēng)力影響( 這個(gè)時(shí)候肯定有水平方向的速度 )

有了這些初始化的參數(shù)之后，我們完善draw方法，繪制雪花：

參數(shù)cxt就是canvas的上下文，這個(gè)函數(shù)很簡(jiǎn)單，就是一個(gè)arc方法調(diào)用init中設(shè)置的值來(lái)畫(huà)圓（雪花），在該方法的最后調(diào)用了一個(gè)update方法，他是干嘛的？他是更新雪花在垂直方向的速度

在update方法中，我們做了邊界判斷：雪花往下飄落的時(shí)候，肯定會(huì)消失，消失之后怎么處理？沒(méi)有到達(dá)邊界怎么處理？

canvas的高度減去雪花的半徑，這就是雪花要消失時(shí)候的邊界，所以this.y < height - this.r 如果這個(gè)條件成立，那么說(shuō)明雪花一直在飄著，我們就要把雪花的y方向的位置更新，雪花看起來(lái)（‘正在下雪’），當(dāng)一個(gè)雪花快要消失的時(shí)候，我們?cè)侔阉苿?dòng)到初始的位置，這樣看起來(lái)就是在圓圓不斷的下雪，而不需要重新繪制雪花（如果這樣做，肯定會(huì)影響性能，這個(gè)特效最后肯定會(huì)被卡死，這個(gè)小技巧很多類似的特效都會(huì)用到）。至此核心的流程已經(jīng)搞定，接下來(lái)，我們就要大量的生成雪花了。

生成500個(gè)雪花，不是同時(shí)生成的，然后把這些雪花保存到數(shù)組snow中.

然后，開(kāi)啟定時(shí)器，讓雪花不斷的飄落吧，

完整的demo代碼：

作者:ghostwu, 出處:http://www.cnblogs.com/ghostwu

在線咨詢

上一篇：注冊(cè)賬號(hào)時(shí)需要注意這些選項(xiàng)
下一篇：jQuery HTML / CSS 方法

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商