Html5Canvas初探学习笔记(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';//设置绘制颜色 

上面的是线宽为 1 的，下面的是线宽为 5 的。

需要注意的是无论是颜色还是线宽，和 j2me 的 setColor 一样，都是一个状态值，使用过后不会恢复成默认值。

Canvas 中的绘制文本是以图像的形式绘制的，无法像普通的 html 文字一样被鼠标指针选取。 Canvas 中的绘制文字可以选取字体字号，这些在 font 属性中被设置。画的时候也有 fill 和 stroke 方法，分别是填充字和空心字，第一个参数是文字，第二个参数和第三个参数是文本的锚点（左下角）。代码和字体效果如下：

分别是正常，斜体，和空心字的效果：

以上就是Html5 Canvas初探学习笔记(3) -绘制样式和绘制文本 的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于Html5Canvas初探学习笔记(3)-绘制样式和绘制文本的详细内容...