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

原创 2012年03月22日 22:02:55

小满(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方法,分别是填充字和空心字,第一个参数是文字,第二个参数和第三个参数是文本的锚点(左下角)。代码和字体效果如下:


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


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

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



版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

Html5 Canvas初探学习笔记(2) -绘制深入

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 上一篇基本的介绍了Html5 canva...

Html5 Canvas初探学习笔记(12) -图片裁减和调整

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 上一篇讲了图片的两种操作,读入和导出,而...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

Html5 Canvas初探学习笔记(4) -清除屏幕

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 有些时候,我们需要清除部分或者全部的屏幕,类...

Html5 Canvas初探学习笔记(11) -简易图片操作

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇介绍简易的图片操作,首先是简易的图片...

Html5 Canvas初探学习笔记(7) -合成

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇介绍另外两个绘制的状态值,分别是全局...

Html5 Canvas初探学习笔记(15) -鼠标事件

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇完成这样一个例子,让主角随着鼠标移动...

Html5 Canvas初探学习笔记(9) -渐变

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇继续介绍html5的绘制效果,和之前介绍...

Html5 Canvas初探学习笔记(10) -复杂路径

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 之前已经介绍过简单的绘制路径,本篇介绍绘...

Html5 Canvas初探学习笔记(6) -变换

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 在html5中,可以实现多种的图形变换包...

Html5 Canvas初探学习笔记(14) -简单动画实现

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 之前都是简单的静止绘图,本篇实现一个简单...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)