html5如何实现图片上写字

这篇文章主要介绍了html5如何实现图片上写字，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　其实在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”;

感谢你能够认真阅读完这篇文章，希望小编分享的“html5如何实现图片上写字”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!