欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  文章写到现在才发现我忘了介绍在canvas上写字的方法,呃,这篇补上。
 
  其实在canvas里写字是很简单的,他有两个原生方法,即strokeText(描边文字)和fillText(填充文字)——一看就知道他们和strokeRect与fillRect是一伙的啦。
 
  他们不能产生路径。
 
  他们的使用方法很简单,接受3个参数,依次是要写的文本,x坐标,y坐标,如:
 
  ctx.fillText('1223',50,50);
 
  ctx.strokeText('asdfsadf',150,50);
 
  当然,这个弱爆了。默认画出来都是黑色的字体。
 
  如果想画彩色的字体怎么设置呢?其实只要像画矩形一样设置fillStyle和strokeStyle即可:
 
  ctx.fillStyle="#f00";
 
  ctx.strokeStyle="#0f0";
 
  这样设置后就可以画出彩色字。用添加渐变的方法就能画出渐变字。
 
  font设置
 
  当然,很可能我还需要改字体的大小,这跟CSS的方法类似,即context的font属性,如:
 
  ctx.font = “30px Arial”;
 
  font呢有个默认值,是’10px sans-serif’,而他接受的参数也必须至少包含两个值,即“字体大小 字体名称”,如果没有这两个值的任何一个,那么设置就不会生效。就算有很多其他设置也不行。
 
  font还有些其他设置,英文版:
 
  font-style:字体样式,即正常normal,斜体italic,倾斜oblique其中的一个。很多字体的倾斜和斜体效果是一样的。例子
 
  font-variant:字体变体。值可能是normal,small-caps中的一个。大部分字体加了也没有变化,因为没有变体。例子
 
  font-weight:字体粗细,值可以是:
 
  normal
 
  bold
 
  bolder
 
  lighter
 
  100——900
 
  这跟CSS设置字体粗细是一样的——其实很多字体都只有粗体与正常体两种状态,英文字体可能会多一点。
 
  另外,他还有一串没什么用的值:
 
  caption,icon,menu,message-box,small-caption,status-bar,
 
  他们的作用是让字体是某种格式呈现,但基本很多字体都不带有这些格式。他们也只需要选一个加入font之中即可,但他们可以独自一人传入font,如ctx.font=’menu’,而不像前面的属性。例子
 
  注意:所有的这些设置都只是各出一个值,组成字符串一下加入到font中,不存在单独设置。这么长的字体串,各个属性的排列顺序就需要注意了。其实他们的顺序遵循CSS中的顺序:
 
  [ [||||]?[ /?]?] | caption | icon | menu | message-box | small-caption | status-bar
 
  注:canvas的字体没有line-height设置,可以附值,但设置了也会无效。
 
  其中每对[]里的属性可以自由切换先后顺序,但每个?前后的属性可不能换。为了便于理解,我总结下:
 
  字体样式,变体,粗细,的设置顺序可以互换,但他们必须在最前面
 
  字体大小后面必须紧挨着字体名称,且他们的顺序必须在上一条的设置后面
 
  如果加了caption那一串什么的,必须加在最后
 
  除了caption那一串外,其余的设置都必须加入字体大小和名称。
 
  妈逼的好复杂,看来我可以以学好了CSS而骄傲。
 
  下面给出一个能生效的字体设置:
 
  字体大小和字体名称是缺一不可的。最简单的:
 
  ctx.font?=?"30px Arial";
 
  ctx.font?=?"small-caps italic 700 30px Arial menu";
 
  而下面这个就不会生效:
 
  ctx.font?=?"small-caps italic 30px Arial 700 menu";
 
  因为字体粗细设置放错了位置。
 
  注意:字体设置只要错了一个(顺序错了?单词错了?),就全部无法生效,且不会报错。
 
  canvas中的文本对齐
 
  canvas中的文本对齐是设置context.textAlign属性。其用法如下:
 
  context.textAlign=”center|end|left|right|start”;
 
  而他们的表现如下图:
 
  很好理解吧?
 
  无疑这篇文章让人看着很纠结,其实只要你CSS知识过关就没问题了。
 
  canvas中text的设置比较恼火,如果我要画一串由不同颜色,不同字体,不同大小的字组成的字符串,那就需要设置font一次又一次,并不是很经济适用。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h62577.shtml