canvas教程

Html5 Canvas初探学习笔记(3) -绘制样式和绘制文本

字号+ 作者:小满(bill man) 来源:小满(bill man) 2015-09-29 16:03 我要评论( )

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 通过设置 2d 渲染上下文的 fillStyle 和 strokeStyle 的属性,就可以改变填充颜色或者绘制颜色。 分别可以通过以下三种方式来修改颜色: Rgb

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man

 

通过设置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的。

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

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

 

分别是正常,斜体,和空心字的效果:


 

如有错误,希望大家多多指正

下一篇继续研究绘制的其他功能

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

网友点评