HTML 画布文本
在画布上绘制文本
要在画布上绘制文本，最重要的属性和方法是:
font- 定义文本的字体属性fillText(text,x,y)- 在画布上绘制"填充"文本strokeText(text,x,y)- 在画布上绘制文本（无填充）
使用 fillText()
实例
将字体设置为 30px "Arial"，并在画布上书写填充文本:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
亲自试一试 »
使用 strokeText()
实例
将字体设置为 30px "Arial"，并在画布上不填充文字:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
亲自试一试 »
添加颜色和居中文本
实例
将字体设置为 30px "Comic Sans MS"，并在画布中心写一个填充的红色文本:
JavaScript:
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
亲自试一试 »
