canvas基础知识（三）创建使用图片

由零开始创建图像

var img = new Image();   // 创建img元素
img.onload = function(){
  // 执行drawImage语句
  drawImage(image, x, y)
  //其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
}
img.src = 'myImage.png'; // 设置图片源地址

drawImage

drawImage(image, x, y)
//其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
/*缩放 Scaling*/
drawImage(image, x, y, width, height)
//这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小
/*切片 Slicing*/
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
/*第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。
 *其它8个参数:
 *前4个是定义图像源的切片位置和大小，(相对于原图片要切掉的位置)
 *后4个则是定义切片的目标显示位置和大小。(在canvas中要摆放的位置)
*/

canvas基础（一）画线

canvas基础知识（二）画矩形、饼