首頁 >web前端 >H5教程 >Html5 Canvas初探學習筆記(3) -繪製樣式和繪製文本

Html5 Canvas初探學習筆記(3) -繪製樣式和繪製文本

黄舟
黄舟原創
2017-02-28 15:26:411203瀏覽

透過設定2d渲染上下文的fillStylestrokeStyle


# #的屬性,就可以改變填滿色彩或繪製顏色。

分別可以透過以下三種方式來修改顏色:Rgb式:

context.fillStyle = 'rgb(255,0,0)';//设置绘制颜色
context.strokeStyle = 'rgb(255,0,0)';//设置绘制颜色
十六進位碼式:
context.fillStyle = '#FF0000';//设置绘制颜色
context.strokeStyle = '#FF0000';//设置绘制颜色
單字式:

context.fillStyle = 'red';//设置绘制颜色
context.strokeStyle = 'red';//设置绘制颜色

另外對於stroke#出來的東西,還可以透過改變lineWidth#屬性來改變線寬,預設的線寬是

1

#。 效果比較如下:上面的是線寬為1 的,下面的是線寬為5的。

要注意的是無論是顏色還是線寬,和

j2me
setColor

#一樣,都是一個狀態值,使用過後不會恢復成預設值。

Canvas

中的繪製文字是以圖像的形式繪製的,無法像普通的

html
文字一樣被滑鼠指標選取。

Canvas

中的繪製文字可以選取字體字號,這些在


font

屬性中被設定。畫的時候也有

fill######和######stroke######方法,分別是填充字和空心字,第一個參數是文字,第二個參數和第三個參數是文字的錨點(左下角)。程式碼與字型效果如下:########################################分別是正常,斜體,和空心字的效果:################## 以上就是Html5 Canvas初探學習筆記(3) -繪製樣式和繪製文本 的內容,更多相關內容請關注PHP中文網(www.php.cn)! #########################
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn