canvas对于图像的操作

图像绘制

图像的绘制方法将会帮助你绘制游戏背景、游戏角色和爆炸效果等这些使游戏更生动的元素。

使用drawImage()方法绘制图像。绘图环境提供了该方法的三种不同版本。

 

函数名 作用
drawImage(image,x,y) 在canvas中(x,y)处绘制图片
drawImage(image,x,y,width,height) 在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) 从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight),缩放到指定的宽度和高度,并在canvas中(x,y)处绘制出来

在我们进行绘制之前,还需要将图片加载到浏览器中,这里我们只需要在<canvas>标签后面添加一个<img>标签:

<img src="spaceship.png" id="spacesship">


我们创建了一个Html5 canvas标记

粘贴以下代码你可以看到如上效果

//获取图片对象的引用
var image = document.getElementById('spaceship');
//在(0,350)处绘制图片
context.drawImage(image,0,350);
			
//缩小图片至原来的一半大小
context.drawImage(image,0,400,100,25);
			
//绘制图片的局部
context.drawImage(image,0,0,60,50,0,420,60,50);

图像的平移和旋转

绘图环境对象提供了一些方法,用以平移或旋转canvas坐标系。

 

函数名 作用
translate(x,y) 将坐标系的原点平移到另外一个点(x,y)
rotate(angle) 以当前原点为中心顺时针旋转坐标系,旋转角度为angle(弧度制)
scale(x,y) 以x和y为因子缩放坐标系

这些方法常用来绘制旋转后的角色或者物体。我们可以这样做。

  1. 将canvas原点平移到物体处。
  2. 以指定的角度旋转canvas。
  3. 绘制物体。
  4. 将canvas复原至初始状态。

粘贴以下代码你可以看到如上效果

//平移原点至物体的位置
context.translate(250,370);
//以新原点为中心旋转60度
context.rotate(Math.PI/3);
context.drawImage(image,0,0,60,50,-30,-25,60,50);
//通过反向旋转和平移恢复原点状态
context.rotate(-Math.PI/3);
context.translate(-240,-370);
			
//平移原点至物体的位置
context.translate(300,370);
//以新原点为中心旋转60度
context.rotate(3*Math.PI/4);
context.drawImage(image,0,0,60,50,-30,-25,60,50);
//通过反向旋转和平移恢复原点状态
context.rotate(-3*-Math.PI/4);
context.translate(-300,-370);

注意:除了通过反向旋转和平移,还可以在变换前调用save(),变换后调用restore()方法来恢复canvas状态。