html5图片上写字,Html5 canvas画图教程

1、html5图片上写字,html5 canvas画图教程文章写到现在才发觉我忘了介绍在canvas上写字的办法，呃，这篇补上。其实在canvas里写字是很容易的，他有两个原生办法，即stroketext（描边文字）和filltext（填充文字）——一看就知道他们和strokerect与fillrect是一伙的啦。他们不能产生路径。他们的用法办法很容易，接受3个参数，依次是要写的文本，x坐标，y坐标，如：ctx.filltext（&39;1223&39;,50,50）;ctx.stroketext（&39;asdfsadf&3

2、9;,150,50）;固然，这个弱爆了。默认画出来都是黑色的字体。假如想画彩色的字体怎么设置呢？其实只要像画矩形一样设置fillstyle和strokestyle即可：ctx.fillstyle="f00"ctx.strokestyle="0f0"这样设置后就可以画出彩色字。用添加渐变的办法就能画出渐变字。font设置固然，很可能我还需要改字体的大小，这跟css的办法类似，即context的font属性，如：ctx.font = 30px arial;font呢有个默认值，是’10px sans-ser

3、if’，而他接受的参数也必需起码包含两个值，即字体大小 字体名称，假如没有这两个值的任何一个，那么设置就不会生效。就算有无数其他设置也不可。font还有些其他设置，英文版：font-style:字体样式，即正常normal，斜体italic，倾斜oblique其中的一个。无数字体的倾斜和斜体效果是一样的。例子font-variant：字体变体。值可能是normal，small-caps中的一个。大部分字体加了也没有变幻，由于没有变体。例子font-weight:字体粗细，值可以是：normalboldbolderlighter100—&mdash

4、;900这跟css设置字体粗细是一样的——其实无数字体都惟独粗体与正常体两种状态，英文字体可能会多一点。另外，他还有一串没什么用的值：caption,icon,menu,message-box,small-caption,status-bar,他们的作用是让字体是某种格式展现，但基本无数字体都不带有这些格式。他们也只需要选一个加入font之中即可，但他们可以独自一人传入font,如ctx.font=’menu’，而不像前面的属性。例子注重：全部的这些设置都只是各出一个值，组成字符串一下加入到font中，不存在单独设

5、置。这么长的字体串，各个属性的罗列挨次就需要注重了。其实他们的挨次遵循css中的挨次： |? /? | caption | icon | menu | message-box | small-caption | status-bar注：canvas的字体没有line-height设置，可以附值，但设置了也会无效。其中每对里的属性可以自由切换先后挨次，但每个？前后的属性可不能换。为了便于理解，我总结下：字体样式，变体，粗细，的设置挨次可以互换，但他们必需在最前面字体大小后面必需紧挨着字体名称，且他们的挨次必需在上一条的设置后面假如加了caption那一串什么的，必需加在最后除了caption那一

6、串外，其余的设置都必需加入字体大小和名称。妈逼的好复杂，看来我可以以学好了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;而他们的表现如下图：很好理解吧？无疑这篇文章让人看着很纠结，其实只