4.7 使用图像_HTML5+CSS3从入门到精通（微课精编版）-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

4.7　使用图像

在canvas中可以导入图像。导入的图像可以改变大小、裁切或合成。canvas支持多种图像格式，如PNG、GIF、JPEG等。

4.7.1　导入图像

视频讲解

在canvas中导入图像的步骤：

第1步，确定图像来源。

第2步，使用drawImage()方法将图像绘制到canvas中。

确定图像来源有4种方式，用户任选一种即可。

　页面内的图片：如果已知图片元素的ID，则可以通过document.images集合、document.getElementsByTagName()或document.getElementById()等方法获取页面内的该图片元素。

　其他canvas元素：可以通过document.getElementsByTagName()或document.getElementById()等方法获取已经设计好的canvas元素。例如，可以用这种方法为一个比较大的canvas生成缩略图。

　用脚本创建一个新的image对象：使用脚本可以从零开始创建一个新的image对象。不过这种方法存在一个缺点：如果图像文件来源于网络且较大，则会花费较长的时间来装载。所以如果不希望因为图像文件装载而导致漫长的等待，需要做好预装载的工作。

　使用data:url方式引用图像：这种方法允许用Base64编码的字符串来定义一个图片，优点是图片可以即时使用，不必等待装载，而且迁移也非常容易。缺点是无法缓存图像，所以如果图片较大，则不太适宜用这种方法，因为这会导致嵌入的url数据相当庞大。

使用脚本创建新image对象时，其方法如下所示。

    var img = new Image();   //创建新的Image对象
    img.src = 'image1.png';   //设置图像路径

如果要解决图片预装载的问题，则可以使用下面的方法，即使用onload事件一边装载图像一边执行绘制图像的函数。

不管采用什么方式获取图像来源，之后的工作都是使用drawImage()方法将图像绘制到canvas中。drawImage()方法能够在画布上绘制图像、画布或视频。该方法也能够绘制图像的某些部分，以及增加或减少图像的尺寸。其用法如下所示。

    //语法1：在画布上定位图像
    context.drawImage(img,x,y);
    //语法2：在画布上定位图像，并规定图像的宽度和高度
    context.drawImage(img,x,y,width,height);
    //语法3：剪切图像，并在画布上定位被剪切的部分
    context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数说明如下：

　img：规定要使用的图像、画布或视频。

　sx：可选。开始剪切的x坐标位置。

　sy：可选。开始剪切的y坐标位置。

　swidth：可选。被剪切图像的宽度。

　sheight：可选。被剪切图像的高度。

　x：在画布上放置图像的x坐标位置。

　y：在画布上放置图像的y坐标位置。

　width：可选。要使用的图像的宽度。可以实现伸展或缩小图像。

　height：可选。要使用的图像的高度。可以实现伸展或缩小图像。

【示例】下面示例演示了如何使用上述步骤将图像引入canvas中，预览效果如图4.47所示。至于第二和第三种drawImage()方法，我们将在后续小节中单独介绍。

图4.47　向canvas中导入图像

4.7.2　缩放图像

视频讲解

drawImage()方法的第二种用法可以用于使图片按指定的大小显示，其用法如下。

    context.drawImage(image, x, y, width, height);

其中width和height分别是图像在canvas中显示的宽度和高度。

【示例】下面示例将4.7.1节示例中的代码稍作修改，设置导入的图像放大显示，并仅显示头部位置，效果如图4.48所示。

图4.48　放大图像显示

4.7.3　裁切图像

视频讲解

drawImage的第三种用法用于创建图像切片，其用法如下。

    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

其中image参数与前两种用法相同，其余8个参数可以参考下面的图示。sx、sy为源图像被切割区域的起始坐标，sw、sh为源图像被切下来的宽度和高度，dx、dy为被切割下来的源图像要放置到目标canvas的起始坐标，dw、dh为被切割下来的源图像放置到目标canvas的显示宽度和高度，如图4.49所示。