HTML5 Canvas 提供了将图片绘制在画布上，它能够绘制图像的某些部分，以及增加或减少图像的尺寸。

绘图方式

// 在画布的(x, y)绘制图片
context.drawImage(img, x, y);

// 在画布的(x, y)绘制图片，并设置宽高
context.drawImage(img, x, y, width, height);

// 剪切图像，并在画布的(x, y)绘制图片
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

// 参数
// img:规定要使用的图像、画布或视频。
// sx:可选。开始剪切的 x 坐标位置。
// sy:可选。开始剪切的 y 坐标位置。
// swidth:可选。被剪切图像的宽度。
// sheight:可选。被剪切图像的高度。
// x:在画布上放置图像的 x 坐标位置。
// y:在画布上放置图像的 y 坐标位置。
// width:可选。要使用的图像的宽度。（伸展或缩小图像）
// height:可选。要使用的图像的高度。（伸展或缩小图像）

例如：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var image = new Image();
image.src = "http://cdn.zdyla.com/upload/post/ca10ac99-8e02-4c9d-b112-c4a4c7264665.jpeg"
image.onload = function (){
    ctx.drawImage(image,20,20,160,160);
}

缩放图片

通过控制绘制图片的宽高来实现缩放。

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var image = new Image();
image.src = "http://cdn.zdyla.com/upload/post/ca10ac99-8e02-4c9d-b112-c4a4c7264665.jpeg"
image.onload = function (){
    ctx.drawImage(image,50,50,100,100);
}

裁切图片

在原图中划出裁切位置之后绘制在画布上。

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var image = new Image();
image.src = "http://cdn.zdyla.com/upload/post/ca10ac99-8e02-4c9d-b112-c4a4c7264665.jpeg"
image.onload = function (){
    ctx.drawImage(image,800,800,1500,1500,20,20,160,160);
}