怎样在HTML5画布中绘制文本图形-

HTML5的标签可以用于在网页上绘制各种图形，那么怎样绘制文本图形？本篇文章就给大家介绍在HTML5画布中绘制文本图形的办法，但愿对你们有所帮忙。【视频教程举荐：HTML5教程】

运用JavaScript在画布中绘制文本图形

第一我们来看看要在画布上绘制文本图形，需要用到的最重要的属性和办法：

1、font属性：定义文本的字体属性，通过font属性可以设定或返回画布上文本内容的目前字体属性。它的运用和CSS font属性类似。

2、fillText()办法：在画布上绘制“添补”文本，文本的色彩默许为：玄色。根本语法为：

fillText(text, x, y, [maxWidth])

3、strokeText()办法：在画布上绘制文本（无添补），也就是说绘制文本轮廓图形；一样，文本色彩默许为：玄色。根本语法为：

strokeText(text, x, y, [maxWidth])

参数注明：

text：表示在画布上需要输出的文本图形。

x，y：相关于画布来说，开端绘制文本的 x 坐标、y 坐标位置

maxWidth：可选参数，表示允许的最大文本宽度，单位为像素。

我们来看看其他可能运用到的文本的样式属性：

1、textAlign样式属性：依据X轴坐标，设定或返回文本内容的目前对齐方式。

取值有：start（默许值，指定文本的开端位置）、end（指定文本的完毕位置）、center（指定文本核心的放置位置）、left（左对齐）、right（右对齐）。

2、fillStyle属性：设定或返回用于添补绘画的色彩、渐变或模式。

下面我们来绘制文本图形，通过示例来看看怎样绘制：

例1：运用fillText()

目前阅读器不支撑HTML5 canvas标志。

《script》
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "40px Arial";
ctx.fillText("百分百源码网！",10,50);
《script》

结果图：

例2：运用strokeText()

《script》
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "40px Arial";
ctx.strokeText("百分百源码网！",10,50);
《script》

结果图：

例3：增加色彩和核心文本

《script》
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d");  
ctx.font="30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("百分百源码网！",canvas.width/2, canvas.height/2);
《script》

结果图：

总结：以上就是本篇文章的全部内容，但愿能对大家的学习有所帮忙。

以上就是怎样在HTML5画布中绘制文本图形的细致内容，更多请关注 百分百源码网 其它相干文章！