【HTML】Canvas(2)-绘制文本

前面写了一篇使用canvas结合javascript绘制图形的文章Canvas(1)-绘制图形，这次我们来看看canvas是如何绘制文本的。

在canvas的API中，只能显示文字，无法直接绘制一个输入框，所以，当需要显示输入框的时候需要使用HTML中的文本框来代替。

绘制文字有fillText()和strokeText()两种方法。fillText()文字呈实心状，strokeText()文字呈空心状。

fillText(text,x,y,width)函数四个参数分别是：文本字符串、坐标x、坐标y、文本宽。第4个参数可省略，此时文本宽度会自动设定为整个文本的宽度。

三个参数：

var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.font='normal 30px Arial';		//设定文字粗细、大小和字体,字体粗细可以为normal,bold,bolder,lighter等，也可以设置数值，如100,600,900
ctx.fillText('hello world',100,50);		//描绘文字

四个参数：

var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.font='italic 50px serif';		//设定文字倾斜、大小和字体
ctx.fillText('hello world',100,50,50);		//描绘文字

strokeText(text,x,y,width)函数用法与fillText函数完全相同：

三个参数：

var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.font='bolder 40px Times New Roman';		//设定文字粗细、大小和字体
ctx.strokeText('hello world',100,50);		//描绘文字

四个参数：

var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.font='lighter 90px Verdana';		//设定文字粗细、大小和字体
ctx.strokeText('hello world',100,80,150);<span style="white-space:pre">		</span>//描绘文字

Author:致知

Sign:路漫漫其修远兮，吾将上下而求索。

附：

【HTML】Canvas(1)-绘制图形

【HTML】Canvas(3)-绘制图片

【HTML】Canvas(4)-进阶