HTML5 - Canvas的使用样例8（图片的绘制、裁剪、伸缩）

2016-01-31 发布：hangge 阅读：3611

Canvas除了可以通过代码绘制各种图形，还可以直接绘制已有的图片，并对图片进行处理。

1，绘制图像

绘图上下文提供了 drawImage() 方法，用于在画布上绘制图片。使用时只要传入相应的图片对象及其起点坐标即可。

HTML5提供了三种方案用来获取图片对象：

（1）使用createImageData()方法一个像素一个像素地创建图像。

（2）使用网页中已有的<img>元素

比如假设网页中已存在如下标记：

<img id="logo" src="logo.png">

那么使用下面代码就可以把该图片复制到画布上：

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

var img = document.getElementById("logo");
context.drawImage(img, 10, 10);

（3）使用代码创建一个图片对象，然后把一个外部图片加载进来

这种方式要注意的是，必须先等待图片加载完毕后，才能把图片对象传递给drawImage()方法使用。

下面获取hangge.com网站的logo图片，并绘制到画布上：

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

//创建图片对象
var img = new Image();

//图片加载完毕后绘制到画布上
img.onload = function() {
	context.drawImage(img, 0, 0);
}

//加载图片文件
img.src = "http://www.hangge.com/blog/images/logo.png";

2，裁减、切割和伸缩图片

（1）改变图片的大小

drawImage()函数还可以传递两个可选参数，设置图片的宽度和高度，从而实现图片的拉伸和缩小。

context.drawImage(img, 0, 0, 300, 150);

（2）裁剪出图片的一部分
可以在图片对象参数后面开始，再传入4个参数。表示从原始图片的什么位置，裁减多大的图片。

context.drawImage(img, source_x, source_y, source_width, source_height, x, y, width, height);

下面取得图片的左半部分并绘制到画布上（原始图片宽度是260）：

context.drawImage(img, 0, 0, 130, 55, 0, 50, 130, 55);