HTML canvas(画布)fillText()方法

fillText()方法定义和用法

fillText()方法在画布上绘制填充文本。文本的默认颜色为黑色。
提示：使用font属性指定字体和字体大小，并使用fillStyle属性以另一种颜色/渐变呈现文本。

fillText()方法浏览器支持

Internet Explorer	Chrome	FireFox	Safari	Opera

9.0（含）以上	支持	支持	支持	支持

fillText()方法语法

context.fillText(text,x,y,maxWidth);

fillText()方法实例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);

ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);

尝试一下

fillText()方法参数值

参数	描述
text	指定将在画布上写入的文本
x	开始绘制文本的x坐标(相对于画布)
y	开始绘制文本的y坐标(相对于画布)
maxWidth	可选的。文本允许的最大宽度，以像素为单位

fillText()方法相关页面

HTML教程：HTML脚本

HTML教程：HTML画布