htmlcanvas图⽚上绘制⽂字，如何⽤HTML5CANVAS绘制⽂字您可能感兴趣的话题：
绘制⽂字
核⼼提⽰：如何在HTML5 canvas上绘制绘制⽂字，并且可以设置⽂字的字体，⼤⼩和颜⾊。
我们可以在HTML5 canvas上绘制绘制⽂字，并且可以设置⽂字的字体，⼤⼩和颜⾊。
绘制⽂字的字体由2D上下⽂的font属性来控制。如果你需要使⽤颜⾊来填充⽂字或制作描边⽂字，可以使⽤2D上下⽂的fillStyle和strokeStyle属性来完成。
要在canvas上绘制⽂字，可以通过2D上下⽂的fillText()函数或strokeText()函数来完成。下⾯是⼀个简单的例⼦：
var canvas = ElementById("ex1");
var context = Context("2d");
context.font = "normal 36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);
context.font = "normal 36px Arial";
context.strokeStyle = "#000000";
context.strokeText("HTML5 Canvas Text", 50, 90);
下⾯的图⽚是上⾯代码的返回结果：
字体和样式
当在HTML5
canvas上绘制⽂字的时候，我们可以设置⽂字的字体和样式。我们可以通过⼀组2D上下⽂的font属性来完成这些⼯作。这些属性和CSS中设置字体的属性是兼容的：
[font style][font weight][font size][font face]
举例来说，我们可以这样设置字体：
context.font = "normal normal 20px Verdana";
对于上⾯的这些属性，我们可以有下⾯的⼀些可取值：
font style可取值有：
normal
italic
oblique
inherit
font weight可取值有：
normal
bold
bolder
lighter
auto
inherit
100
200
300
400
500
600
700
800
900
font size：字体的尺⼨，单位像素。
fontweight取值
ont face：字体。例如：verdana, arial, serif, sans-serif, cursive, fantasy,
monospace等
需要注意的是，不是所有的浏览器都⽀持所有这些属性的，实际使⽤中你需要根据实际情况做⼀些测试。
绘制⽂字
当在HTML5
canvas中绘制⽂字的时候，你可以绘制填充⽂字，也可以绘制描边⽂字。它们分别通过2D上下⽂的fillText()和strokeText()函数来实现。这两个函数的定义如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。