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

来源：互联网发布：第三方辅助软件编辑：程序博客网时间：2024/06/01 08:48

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

0 0