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

透過設定2d渲染上下文的fillStyle和strokeStyle

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

分別可以透過以下三種方式來修改顏色：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）！ #########################