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 2D入门1 - Canvas绘制文本和图像

Canvas历史   canvas是一个新的HTML元素,这个元素可以被脚本语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做动画。canvas最先在苹果公司(App...
  • pyx61198
  • pyx61198
  • 2016年08月31日 11:44
  • 884

HTML5中canvas画图之绘制数据图表

上一篇博文绘制了一个方格图,现在来绘制一个数据图表。实现的效果如下: 实现代码如下: 数据图表 //定义图表数据 var uriage=[80,92,101...
  • qq_25821067
  • qq_25821067
  • 2016年06月11日 22:38
  • 2755

html5 canvas学习--绘制文字

1.绘制填充文字:context.fillText(text,x,y,[maxWidth]) function draw(){ var ctx = document.ge...
  • W3Chhhhhh
  • W3Chhhhhh
  • 2016年10月07日 21:10
  • 2211

html5 Canvas画图10:圆角矩形

本文属于《html5 Canvas画图系列教程》 上一篇文章我讲了画矩形和圆形的方法,他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。 一个正常的圆角矩形,...
  • happyrabbit456
  • happyrabbit456
  • 2017年02月14日 15:34
  • 509

HTML5 canvas绘图基本使用方法

本文介绍了html5 中canvas标签的基本使用方法,详细讲解了其重要的属性和方法...
  • u014607184
  • u014607184
  • 2016年06月26日 15:20
  • 33469

HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制

HTML5中最有意思的就是这个canvas了 通过它我们可以画自己想要的图形 它也是十分重要的技术 应用于游戏、图表等等 或者绘制各种酷炫的东西 这里给大家分享一个网站 传送门 里面都是c...
  • q1056843325
  • q1056843325
  • 2017年01月08日 14:38
  • 2347

html5 canvas 绘制曲线图

代码: Line Chart Demo body{background-color:#bfd0c4;} canvas{background-color...
  • liu4071325
  • liu4071325
  • 2016年07月29日 09:10
  • 4052

html5 canvas 详细教程1---样式设置/矩形绘制/路径绘制

是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas...
  • hackerose1994
  • hackerose1994
  • 2016年03月08日 22:22
  • 1007

利用 html5 canvas 简单绘制折线图

利用 html5 canvas 简单绘制折线图
  • LOW584710047
  • LOW584710047
  • 2015年04月29日 17:05
  • 4849

HTML5 Canvas学习笔记之详解弧线的绘制

Canvas翻译过来呢就是画布 所以Canvas的作用就是把网页当成一张画布,在其中画画——说实话H5中最令我感兴趣的就是Canvas了。在html中引入canvas 当前浏览器不支持Can...
  • sinat_25127047
  • sinat_25127047
  • 2016年02月09日 10:54
  • 2443
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html5 Canvas初探学习笔记(3) -绘制样式和绘制文本
举报原因:
原因补充:

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