HTML5 Canvas4

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():
实例

使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：

JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

尝试一下 »

使用 strokeText():
实例

使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：

JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

尝试一下 »