HTML5 canvas绘制文本

HTML5的canvas也提供渲染文本的方法.

（1）绘制文本方法：fillText和strokeText

• fillText(text,x,y[,maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
• strokeText(text,x,y,[,maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的

fillText样例

function draw() {
	var canvas=document.getElementById("canvas");
	var ctx=canvas.getContext('2d');
  ctx.font="48px serif";
  ctx.fillStyle="blue";
  ctx.fillText("Hello world!",50,50);
}

strokeText样例

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.strokeStyle="green";
  ctx.strokeText("Hello world", 10, 50);
}

（2）文本的样式

我们用fillText和strokeText方法绘制文本，那么如何设置绘制好的文本的样式呢？canvas中提供了如下方法：

• font = value 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。统一设置样式：ctx.font=“bold 18px 幼圆”
• textAlign = value 文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
• textBaseline = value 基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
• direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

function draw() {
	var canvas=document.getElementById("canvas");
	var ctx=canvas.getContext('2d');
  ctx.font="bold 48px 幼圆";
  ctx.textAlign="left";
  ctx.textBaseline="hanging"
  ctx.direction="rtl";
  ctx.fillText("Hello world!",50,50,1000);
}

（3）预测量文本宽度

当需要获得更多的文本细节时，measureText方法可以给你测量文本的方法。

• measureText() 将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。

function draw() {
	var canvas=document.getElementById("canvas");
	var ctx=canvas.getContext('2d');
  var text=ctx.measureText("spider");
  alert(text.width);
}

（4）色彩Colors

在用fill()方法和stroke()方法时，我们可以用fillStyle和strokeStyle设置填充和边框的颜色：

• fillStyle = “color” 设置图形的填充颜色。

• strokeStyle=“color” 设置图形轮廓的颜色。

（5）阴影 Shadows

文字阴影

文字阴影相比已经不足为奇，在CSS3中的text-shadow属性可以设置2D的阴影，在HTML5中canvas也提供了这样的API

• shadowOffsetX = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
• shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
• shadowBlur = float shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
• shadowColor = color shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
  这和CSS3的text-shadow有异曲同工之妙，这里不再赘述

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
 
  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);
}