在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对象或视频帧的时候,可以任意指定其绘制位置及缩放比例。
效果图如下: