通过设置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）！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
470
