html5 canvas 笔记三（绘制文本和图片）

绘制文本

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

实例：

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

设置文本样式

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

文本测量

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

实例：获取文本宽度

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

绘制图片

引入图像到canvas里需要以下两步基本操作：

1. 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片
2. 使用drawImage()函数将图片绘制到画布上

１＞使用相同页面内的图片

• document.images集合
• document.getElementsByTagName()方法
• 如果你知道你想使用的指定图片的ID，你可以用document.getElementById()获得这个图片

２＞由零开始创建图像

var img = new Image();   // 创建img元素
img.onload = function(){
  // 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址

注意：若调用 drawImage 时，图片没装载完，那什么都不会发生，因此你应该用load时间来保证不会在加载完毕之前使用这个图片．

绘制图片

• drawImage(image, x, y)　　其中image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

实例：

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    }
    img.src = 'images/backdrop.png';
  }

缩放 Scaling

• drawImage(image, x, y, width, height)

切片 Slicing

• drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)