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

最新推荐文章于 2024-04-17 17:10:25 发布

原创最新推荐文章于 2024-04-17 17:10:25 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#canvas #绘制文本

Web前端专栏收录该内容

51 篇文章

订阅专栏

本文介绍了HTML Canvas如何使用fillText()和strokeText()方法绘制文本，包括文字填充与描边的区别，以及函数参数的使用。同时提到canvas无法直接绘制输入框，需要借助HTML文本框。还提供了一个示例文本。

前面写了一篇使用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)-进阶