html 5 canvas繪圖

1、HTML 5 地圖繪制地圖繪制第七次匯報(bào)HTML 5 canvas HTML 5 規(guī)范引進(jìn)了很多新特性，其中最令人期待的之規(guī)范引進(jìn)了很多新特性，其中最令人期待的之一就是一就是 canvas 元素。元素。HTML 5 canvas 提供了通提供了通過(guò)過(guò) JavaScript 繪制圖形的方法，此方法使用簡(jiǎn)單但功能繪制圖形的方法，此方法使用簡(jiǎn)單但功能強(qiáng)大。每一個(gè)強(qiáng)大。每一個(gè)canvas 元素都有一個(gè)元素都有一個(gè)”上下文上下文( context )” (想象成繪圖板上的一頁(yè)想象成繪圖板上的一頁(yè))，在其中可以繪制任意圖形。瀏，在其中可以繪制任意圖形。瀏覽器支持多個(gè)覽器支持多個(gè) canvas 上下文，并通

2、過(guò)不同的上下文，并通過(guò)不同的API 提供提供圖形繪制功能。圖形繪制功能。大部分的瀏覽器都支持大部分的瀏覽器都支持 2D canvas 上下文上下文包包括括 Opera , Firefox, Konqueror 和和Safari。而且某些版。而且某些版本的本的 Opera 還支持還支持 3D canvas ，F(xiàn)irefox 也可以通過(guò)插也可以通過(guò)插件形式支持件形式支持 3D canvas canvas 基礎(chǔ)基礎(chǔ)創(chuàng)建創(chuàng)建 canvas 的方法很簡(jiǎn)單，只需要在的方法很簡(jiǎn)單，只需要在 HTML 頁(yè)面中添加頁(yè)面中添加 元素：元素：canvas 繪圖方法繪圖方法要在畫(huà)布中繪制圖形需要使用要在畫(huà)布中繪制圖形

3、需要使用 JavaScript 。首先通過(guò)。首先通過(guò) getElementById 函數(shù)找到函數(shù)找到 canvas元素，然后初始化上元素，然后初始化上下文。之后可以使用上下文下文。之后可以使用上下文 API 繪制各種圖形。繪制各種圖形。fillStyle 、 strokeStyle、clearRect 和和 lineWidth 屬性屬性 其中，其中， fillStyle 、 strokeStyle、clearRect 參參數(shù)：（數(shù)：（x, y, width, height ）路徑路徑通過(guò)通過(guò) canvas 路徑（路徑（path）可以繪制任意）可以繪制任意形狀?？梢韵壤L制輪廓，然后繪制邊框和形狀

4、?？梢韵壤L制輪廓，然后繪制邊框和填充。創(chuàng)建自定義形狀很簡(jiǎn)單，使用填充。創(chuàng)建自定義形狀很簡(jiǎn)單，使用beginPath()開(kāi)始繪制，然后使用直線、曲開(kāi)始繪制，然后使用直線、曲線和其他圖形繪制你的圖形。繪制完畢后線和其他圖形繪制你的圖形。繪制完畢后調(diào)用調(diào)用 fill 和和 stroke 即可添加填充或者設(shè)置即可添加填充或者設(shè)置邊框。調(diào)用邊框。調(diào)用 closePath() 結(jié)束自定義圖形結(jié)束自定義圖形繪制。繪制。 插入圖像插入圖像drawImage 方法允許在方法允許在 canvas 中插入其他圖像。在中插入其他圖像。在 Opera 中可以在中可以在 canvas 中繪制中繪制 SVG 圖形。此方法比

5、較圖形。此方法比較復(fù)雜，可以有復(fù)雜，可以有3個(gè)、個(gè)、5個(gè)或個(gè)或9個(gè)參數(shù)：個(gè)參數(shù)：l3個(gè)參數(shù)：最基本的 drawImage 使用方法。一個(gè)參數(shù)指定圖像位置，另兩個(gè)參數(shù)設(shè)置圖像在 canvas中的位置。l5個(gè)參數(shù)：中級(jí)的 drawImage 使用方法，包括上面所述3個(gè)參數(shù)，加兩個(gè)參數(shù)指明插入圖像寬度和高度 (如果你想改變圖像大小)。l9個(gè)參數(shù)：最復(fù)雜drawImage 雜使用方法，包含上述5個(gè)參數(shù)外，另外4個(gè)參數(shù)設(shè)置源圖像中的位置和高度寬度。這些參數(shù)允許你在顯示圖像前動(dòng)態(tài)裁剪源圖像。像素級(jí)操作像素級(jí)操作2D Context API 提供了三個(gè)方法用于像素級(jí)操提供了三個(gè)方法用于像素級(jí)操作：作：cre

6、ateImageData, getImageData, putImageData。ImageData對(duì)象保存了圖像像素值。每個(gè)對(duì)象有對(duì)象保存了圖像像素值。每個(gè)對(duì)象有三個(gè)屬性三個(gè)屬性: width, height 和和data。data 屬性類(lèi)屬性類(lèi)型為型為CanvasPixelArray，用于儲(chǔ)存，用于儲(chǔ)存width*height*4個(gè)像素值。每一個(gè)像素有個(gè)像素值。每一個(gè)像素有RGB值值和透明度和透明度alpha值值(其值為其值為 0 至至 255，包括，包括alpha在內(nèi)在內(nèi))。像素的順序從左至右，從上到下，按行。像素的順序從左至右，從上到下，按行存儲(chǔ)。存儲(chǔ)。通過(guò)通過(guò) ImageData 可

7、以完成很多功能可以完成很多功能 。例：。例：簡(jiǎn)單的顏色反轉(zhuǎn)濾鏡簡(jiǎn)單的顏色反轉(zhuǎn)濾鏡文字文字context 對(duì)象可以設(shè)置以下對(duì)象可以設(shè)置以下 text 屬性：屬性：lfont：文字字體，同 CSS font-family 屬性ltextAlign：文字水平對(duì)齊方式。可取屬性值: start, end, left,right, center。默認(rèn)值:start.ltextBaseline：文字豎直對(duì)齊方式?？扇傩灾担簍op, hanging, middle,alphabetic, ideographic, bottom。默認(rèn)值：alphabetic.fillText 和和 strokeText有兩

8、個(gè)方法可以繪制文字：有兩個(gè)方法可以繪制文字： fillText 和和 strokeText。第一個(gè)繪制帶。第一個(gè)繪制帶 fillStyle 填充填充的文字，后者繪制只有的文字，后者繪制只有 strokeStyle 邊框邊框的文字。兩者的參數(shù)相同：要繪制的文字的文字。兩者的參數(shù)相同：要繪制的文字和文字的位置和文字的位置(x,y) 坐標(biāo)。還有一個(gè)可選選坐標(biāo)。還有一個(gè)可選選項(xiàng)項(xiàng)最大寬度。如果需要的話，瀏覽器最大寬度。如果需要的話，瀏覽器會(huì)縮減文字以讓它適應(yīng)指定寬度。文字對(duì)會(huì)縮減文字以讓它適應(yīng)指定寬度。文字對(duì)齊屬性影響文字與設(shè)置的齊屬性影響文字與設(shè)置的(x,y) 坐標(biāo)的相對(duì)坐標(biāo)的相對(duì)位置。位置。 在在

9、 canvas 中繪制中繪制”hello world” 文字文字 ：陰影陰影（目前只有目前只有 Konqueror 和和 Firefox 3.1 nightly build 支支持持 Shadows API ）lshadowColor：陰影顏色。其值和 CSS 顏色值一致。lshadowBlur：設(shè)置陰影模糊程度。此值越大，陰影越模糊。其效果和 Photoshop 的高斯模糊濾鏡相同。lshadowOffsetX 和 shadowOffsetY：陰影的 x 和 y 偏移量，單位是像素。顏色漸變顏色漸變除了除了 CSS 顏色，顏色， fillStyle 和和 strokeStyle 屬性可以設(shè)置為屬性可以設(shè)置為 CanvasGradient 對(duì)象。對(duì)象。通過(guò)通過(guò) CanvasGradient可以為線條和填充可以為線條和填充使用顏色漸變。使用顏色漸變。欲創(chuàng)建欲創(chuàng)建 CanvasGradient 對(duì)象，可以使用對(duì)象，可以使用兩個(gè)方法：兩個(gè)方法：createLinearGradie