canvas - 绘图 - 图像绘制（一）完整绘制

在canvas中绘制图像：

主要的JS代码逻辑是：

var canvas = document.getElementById('canvas'),

context = canvas.getContext('2d'),

image = new Image();

 

image.src = 'timg.jpeg';

image.onload = function(e) {

context.drawImage(image,0,0);

}

代码中首先创建了一幅图像，设置了它的数据源，然后等待浏览器加载图片，在图片加载完成后，将其绘制于canvas的左上角。

这就是drawImage()最简单的用法。

采用这种方式，可以将一张未经缩放的图像绘制于canvas中，该方式唯一的缺点就是，你必须等待图像加载完毕之后才能将其进行绘制，如果在图片尚未完成加载时，就进行绘制，那么根据canvas规范，drawImage()方法的执行会失败，而且没有任何提示。

drawImage()方法会将一幅图像绘制到一个canvas中，所绘制的图像叫做“源图像”，而绘制到的地方则叫做“目标canvas”，以字母“s”开头的变量名代表源图像，以字母“d”开头的变量名则用于指标目标canvas。

drawImage()方法可以接受以下3套参数：

方法一：drawImage(image,dx,dy)

方法二：drawImage(image,dx,dy,dw,dh)

方法三：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

方法一：会将整幅图像绘制在目标canvas中的指定位置上

方法二：会将图像完整地绘制到指定的位置上，然而，在绘制时会根据目标区域的宽度与高度进行缩放；

方法三：会将整幅图像或其一部分绘制到目标canvas指定位置上，而且在绘制时会根据目标区域的宽度与高度对图像进行绘制。

 

小技巧：

drawImage()方法的使用灵活，可以将一幅图像，一个canvas对象或一个视频帧的整体或某个部分绘制到canvas中。在绘制这些图像，canvas对象或视频帧的时候，可以任意指定其绘制位置及缩放比例。

 

效果图如下：