W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML Canvas 文本



在画布上绘制文本

要在画布上绘制文本,最重要的属性和方法是:

  • font - 定义文本的字体属性
  • fillText(text,x,y) - 在画布上绘制"填充"文本
  • strokeText(text,x,y) - 在画布上绘制文本(无填充)

使用 fillText()

Example

将字体设置为 30px "Arial" ,并在画布上写入一个填充的文本:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
尝试一下 »

使用 strokeText()

Example

将字体设置为 30px "Arial" ,并在画布上写入一个无填充的文本:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
尝试一下 »

添加颜色和文本居中对齐

Example

将字体设置为 30px "Comic Sans MS" ,并在画布的中央写一个填充的红色文本:

Your browser does not support the HTML5 canvas tag.

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);
尝试一下 »