H5：畫布Canvas基礎知識講解（三）之文字、陰影、顏色漸變

上一節介紹了H5：畫布canvas基礎知識講解（二）之插入圖像、像素級操作，接下來繼續講解H5：畫布canvas基礎。

文字

雖然最近的WebKit版本和Firefox 3.1 nightly build才開始支持Text API，為了保證文章完整性我決定仍在這里介紹文字API。

context對象可以設置以下text屬性：

font：文字字體，同CSS font-family屬性；

textAlign：文字水平對齊方式。可取屬性值: start,end,left,right,center。默認值：start；

textBaseline：文字豎直對齊方式。可取屬性值：top,hanging,middle,alphabetic,ideographic,bottom。默認值：alphabetic。

有兩個方法可以繪制文字：fillText和strokeText。第一個繪制帶fillStyle填充的文字，后者繪制只有 strokeStyle邊框的文字。兩者的參數相同：要繪制的文字和文字的位置(x,y)坐標。還有一個可選選項——最大寬度。如果需要的話，瀏覽器會縮 減文字以讓它適應指定寬度。

文字對齊屬性影響文字與設置的(x,y)坐標的相對位置。

ontext.fillStyle = '#00f';

context.font = 'italic 30px sans-serif';

context.textBaseline = 'top';

context.fillText ('Hello world!', 0, 0);

context.font = 'bold 30px sans-serif';

context.strokeText('Hello world!', 0, 50);

可以把上面代碼放置在文檔head部分中，或者放在外部JavaScript文件中。

陰影

目前只有Konqueror和Firefox 3.1 nightly build支持Shadows API。API的屬性為：shadowColor：陰影顏色。其值和CSS顏色值一致。

shadowBlur：設置陰影模糊程度。此值越大，陰影越模糊。其效果和Photoshop的高斯模糊濾鏡相同。

shadowOffsetX和shadowOffsetY：陰影的x和y偏移量，單位是像素。

context.shadowOffsetX = 5;

context.shadowOffsetY = 5;

context.shadowBlur = 4;

context.shadowColor = 'rgba(255, 0, 0, 0.5)';

context.fillStyle = '#00f';

context.fillRect(20, 20, 150, 100);

可以把上面代碼放置在文檔head部分中，或者放在外部JavaScript文件中。

顏色漸變

除了CSS顏色， fillStyle和strokeStyle屬性可以設置為CanvasGradient對象。——通過CanvasGradient可以為線條和填充使用顏色漸變。

欲創建CanvasGradient對象，可以使用兩個方法：createLinearGradient和createRadialGradient。前者創建線性顏色漸變，后者創建圓形顏色漸變。

創建顏色漸變對象后，可以使用對象的addColorStop方法添加顏色中間值。

下面的代碼演示了顏色漸變使用方法：

var gradient1 = context.createLinearGradient(sx,sy,dx,dy);

gradient1.addColorStop(0, '#f00');

gradient1.addColorStop(0.5, '#ff0');

gradient1.addColorStop(1, '#00f');

var gradient2 = context.createRadialGradient(sx,sy,sr,dx,dy, dr);

可以把上面代碼放置在文檔head部分中，或者放在外部JavaScript文件中。

小結

Canvas是HTML5最讓人期待的特性之一，目前已獲得大部分Web瀏覽器支持Canvas可以幫助創建游戲、增強圖形用戶界面。2D context API提供大量圖形繪制功能——我希望通過本文你了解了Canvas使用，并且你有興趣了解更多！

Canvas

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。