如安在HTML5画布中绘制文本图形【html5教程】

在HTML5中，起首须要运用<canvas>标签建立画布，然后在画布中运用javascript的font属性、fillText()或strokeText()要领来绘制文本图形。

HTML5的<canvas>标签能够用于在网页上绘制种种图形，那末怎样绘制文本图形？本篇文章就给人人引见在HTML5画布中绘制文本图形的要领，愿望对你们有所协助。【视频教程引荐：HTML5教程】

运用<canvas>标签建立画布

在HTML页面上，画布是一个的矩形地区。它运用canvas标签元素指定；默许情况下，画布中是没有边框、没有内容的，它就像一个容器。但我们能够运用它内置的属性或许css来增加一些款式。

例：运用width属性和height 属性设置宽高。

<canvas id = "mycanvas" width ="400" height ="250"> </canvas>

我们还能够运用css来给画布增加边框、背景色彩，例：

<canvas id="myCanvas" width="300" height="200" style="border:2px solid red;background-color:pink">当前的浏览器不支持HTML5 canvas标签。</canvas>

假如没法建立画布时，就会显现<canvas>标签内的内容，提醒当前的浏览器不支持HTML5 canvas标签。

效果图：

运用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()

<canvas id ="myCanvas" width ="400" height ="250" style="border:2px solid red;">当前浏览器不支持HTML5 canvas标记。</canvas>

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "40px Arial";
ctx.fillText("ki4网！",10,50);
</script>

效果图：

例2：运用strokeText()

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "40px Arial";
ctx.strokeText("ki4网！",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("ki4网！",canvas.width/2, canvas.height/2);
</script>

效果图：