html 5 canvas繪圖

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

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

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

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

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

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

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

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

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 對象。對象。通過通過 CanvasGradient可以為線條和填充可以為線條和填充使用顏色漸變。使用顏色漸變。欲創(chuàng)建欲創(chuàng)建 CanvasGradient 對象，可以使用對象，可以使用兩個方法：兩個方法：createLinearGradie