基于HTML5的绘图——图像的简单操作

绘制图像

HTML5绘制图像需要使用drawImage（）函数，该函数有三种使用格式，它们的语法形式如下所示：

context.drawImage(image,x,y);
context.drawImage(image,y,width,height);
context.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);

上述语法中第一个drawImage（）函数传入了三个参数：image可以表示一个img元素、video元素或者javascript中的一个对象，使用该参数代表的实际对象来装载图像文件；x和y分别表示绘制图像在画布中的起始横坐标和纵坐标。使用该函数绘制出来的图像与原图像大小相同

相比第一个函数而言，第二个drawImage（）函数出入了5个参数，它可以对图像实现缩放效果。前三个参数说明可以参考第一个函数，width和height分别是绘制图像的宽和高

第三个drawImage（）函数比较复杂，它可以用来将画布中已经绘制的图像全部或者局部区域复制到另外一个位置。该函数传入了9个参数，这些参数的具体说明如下所示：

image：表示被复制的图像文件

sx：表示原图像的被复制区域在画布中的起始横坐标

sy：表示原图像的被复制区域在画布中的起始纵坐标

sWidth：表示被复制区域的宽度

sHeight：表示被复制区域的高度

dx：表示复制后的目标图像在画布中的起始横坐标

dy：表示复制后的目标图像在画布中的起始纵坐标

dWidth：表示复制后的目标图像的宽度

dHeight：表示复制后目标图像的高度

下面看具体的实例：

（1）添加新的HTML页面，页面合适位置添加4个canvas元素，分别显示不同的图像

<canvas id="myCanvas1" width="150" height="150" style="margin-left:14px"></canvas>
<canvas id="myCanvas2" width="150" height="150" style="margin-left:14px"></canvas>
<canvas id="myCanvas3" width="150" height="150" style="margin-left:14px"></canvas>
<canvas id="myCanvas4" width="150" height="150" style="margin-left:14px"></canvas>

（2）页面加载时调用javascript脚本

function drawPicture(id){
	var ctx = document.getElementById("myCanvas"+id).getContext("2d");
	var img = new Image();
	img.src = "tuxiangimages/b_"+id+".jpg";
	img.onload = function(){
		ctx.drawImage(img,150,150);
	}
}
window.AddEventListener("load",drawPicture(1),true);
window.AddEventListener("load",drawPicture(2),drawPicture(3),drawPicture(4),true);

上述代码中首先使用不带参数的new方法创建image对象，然后设定该对象的src属性值为需要绘制的图像文件的路径。如果某些图像文件比较大，则需要耐心等待图像全部绘制装载完成才能看见图像，所以直接调用img.onload=function(){}即可。它表示在image对象中的onload事件中同步执行绘制图像的函数，然后就可以一边加载一边绘制了。最后在加载时调用drawImage（）函数绘制图像，在函数中传递5个参数对图像进行缩放，指定绘制图像的大小为150*150

图像平铺

图像平铺即按照一定比例将图像缩小并将画布铺满。图像平铺功能的实现有两种方式，使用上下文对象的drawImage（）函数或者createPattern（）函数。createPattern函数的语法形式如下所示：

context.createPattern(image,type);

上述语法形式中createPattern（）函数包含两个参数，image表示平铺的图像，type表示平铺的类型。该值的具体内容如下所示：

repeat-x：横向平铺

repeat-y：纵向平铺

no-repeat：不平铺

repeat：全方向平铺

使用createPattern（）函数实现平铺图像的功能比使用drawImage（）函数简单方便的多，只需要几个简单的步骤就能完成，主要步骤如下：

（1）创建image对象并指定文件，使用createPattern（）函数创建填充样式

（2）将样式指定给上下文对象的fillStyle属性

（3）填充画布

下面一个案例分别使用drawImage（）函数和creaPattern（）函数实现图像平铺，点击不同按钮查看平铺效果。具体步骤如下

（1）添加新的HTML页面，在页面合适位置添加canvas元素和两个类行为button的input元素

<div>
	<input type="button" onclick="drawPicture()" value="drawImage()函数平铺" />
	<input type="button" onclick="drawCreatePattern()" value="createPattern()函数平铺" />
</div>
<canvas id="myCanvas1" width="720px" height="170px"></canvas>

（2）页面加载或者单击“drawImage（0函数平铺”按钮时触发onclick事件，调用drawPicture（）函数，该函数主要调用drawImage（）函数实现平铺效果

function drawPicture(){
	var canvas = document.getElementById("myCanvas1");
	var ctx = canvas.getContext("2d");
	var img = new Image();
	img.src = "tuxiangimages/ab.jpg"
	img.onload = function(){
		var scale = 1.5;
		var n1 = img.width/scale;
		var n2 = img.height/scale;
		var n3 = canvas.width/scale;
		var n4 = canvas.height/scale;
		for(var i=0;i<n3;i++)
			for(var j=0;j<n4;j++）
				ctx.drawImage(img,i*n1,j*n2,n1,n2);
	}
}

（3）单击“createPattern（）函数平铺”按钮时触发onclick事件，调用drawCreatePattern（）函数，该函数主要向createPattern（）函数中传入值为“repeat”的平铺方式实现平铺效果

function drawCreatePattern(){
	var canvas = document.getElementById("myCanvas1");
	var ctx = canvas.getContext("2d");
	var img = new Image();
	img.src = "tuxiangimages/ab.jpg";
	img.onload = function (){
		var pattern = ctx.createPattern(img,"repeat");
		ctx.fillStyle = pattern;
		ctx.fillRect(0,720,170);
	}
}

图像裁剪和复制

图像裁剪是指在画布内使用路径时只绘制该路径区域内的图像，而不绘制路径外部的图像。

使用上下文对象的不带参数的click（）函数可以实现图像的裁剪功能，该函数使用路径来对canvas画布设置一个裁剪区域，因此必须创建路径，创建路径完成后调用click（）函数设置裁剪区域

前面已经介绍过drawImage（）函数的多种形式，如果该函数带有9个参数则可以实现图像复制功能，该功能也可以看作是变相实现了图像裁剪的功能

下面分别通过click（）函数和drawImage（）函数实现图像的裁剪和复制功能

（1）添加新的HTML页面，在页面合适位置添加canvas元素和input元素

<div>
	<input type="button" onclick="draw()" value="clip()函数裁剪" />
	<input type="button" onclick="drawImage()" value="drawImage()函数复制" />
</div>
<canvas id="myCanvas" width="300px" height="300px"></canvas>
<canvas id="myCanvas2" width="300px" height="300px"></canvas>

（2）页面加载或者单击“clip（）函数裁剪”按钮时调用draw（）函数实现图像裁剪效果

function draw(){
	document.getElementById("myCanvas2").style.display = "block";
	var context = document.getElementById("myCanvas2").getContext("2d");
	var img = new Image();
	img.src = "tuxiangimages/a_1.gif";
	context.beginPath();
	context.closePath();
	context.save();
	context.arc(150,Math.PI*2,true);
	context.clip();
	context.stroke();
	context.drawImage(img,300,300);
	context.restore();
	document.getElementById("myCanvas").style.display = "none";
}

（3）单击“drawImage（）函数复制”按钮，调用drawImage（）函数实现图像复制效果

function drawImage(){
	document.getElementById("myCanvas").style.display = "block";
	var content = document.getElementById("myCanvas");
	var ctx = content.getContext("2d");
	var img = new Image();
	img.src = "tuxiangimages/a_1.gif";
	img.onload = function () {
		ctx.drawImage(img,50,300);
	}
	document.getElementById("myCanvas2").style.display = "none";
}