canvas绘制文本

在绘图环境中提供了两种方法在canvas中绘制文本。

函数名 作用
strokeText(text,x,y) 在(x,y)处绘制空心的文本
fillText(text,x,y) (x,y)处绘制实心的文本

与其他的HTML元素中的文本不同,canvas中的问题不能没有padding、margin等css布局参数。通过设置绘图环境的font属性可以使用任何css font 属性,以及选择调用stroke或fill风格的函数,来改变文本的输出样式。

我们创建了一个Html5 canvas标记

粘贴以下代码你可以看到如上效果

//绘制文本
context.fillText('这里有一些文字',330,150);
			
//修改字体
context.font = '18px Arial';
context.fillText('这里有一些文字',330,170);
			
//绘制空心的文本
context.font = '16px Arial';
context.strokeText('这里有一些文字',330,190);