canvas的drawImage方法参数详解

引言：

canvas很有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。

一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。

drawImage 方法有三种形态：

drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分

参数	描述
image	规定要使用的图像、画布或视频
sx	可选。开始剪切图片的 x 坐标位置
sy	可选。开始剪切图片的 y 坐标位置
sw	可选。被剪切图像的宽度（就是裁剪之前的图片宽度，这里的宽度若小于图片的原宽。则图片多余部分被剪掉；若大于，则会以空白填充）
sh	可选。被剪切图像的高度（就是裁剪之前的图片高度）
dx	在画布上放置图像的 x 坐标位置
dy	在画布上放置图像的 y 坐标位置
dw	可选。要使用的图像的宽度（就是裁剪之后的图片高度，放大或者缩放）
dh	可选。要使用的图像的高度（就是裁剪之后的图片高度，放大或者缩放）

 

看实例（源图片是120*120的）

drawImage(image, dx, dy) 在画布指定位置绘制原图

	var canvas = document.getElementById("canvas");
	canvas.width=240;
	canvas.height=240;
	var ctx=canvas.getContext("2d");
	
	var image = new Image();
	image.src="./images/head.jpeg";
	image.onload=function(){
		ctx.drawImage(this,0,0);
	}

效果如下

可以看到图片没有做任何的处理，直接从0,0位置绘制出来

 

drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图

	var canvas = document.getElementById("canvas");
	canvas.width=240;
	canvas.height=240;
	var ctx=canvas.getContext("2d");
	
	var image = new Image();
	image.src="./images/head.jpeg";
	image.onload=function(){
		ctx.drawImage(this,0,0,240,240);
	}

效果如下

后面的两个参数，指定了绘制的长宽，这里都指定240，会把画布占满。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分

	var canvas = document.getElementById("canvas");
	canvas.width=240;
	canvas.height=240;
	var ctx=canvas.getContext("2d");
	
	var image = new Image();
	image.src="./images/head.jpeg";
	image.onload=function(){
		ctx.drawImage(this,0,0,60,60,0,0,120,120);
	}

效果如下

图片被截取了左上角一部分，然后还放大显示长宽120