7.3 绘制文字和图像

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

7.3.1 绘制文字

fillText()方法能够在画布上绘制填色文本，默认颜色是黑色，其用法如下。

     context.fillText(text,x,y,maxWidth);

参数说明如下。

text：规定在画布上输出的文本。

x：开始绘制文本的x坐标位置（相对于画布）。

y：开始绘制文本的y坐标位置（相对于画布）。

maxWidth：允许的最大文本宽度（可选），以像素计。

【示例】下面使用fillText()方法在画布上绘制文本Hi和Canvas API，效果如图7.15所示。

图7.15 绘制填充文字

7.3.2 导入图像

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对象时，其方法如下。

如果要解决图片预装载的问题，可以使用下面的方法，即使用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中。

7.3.3 将图像写入画布

putImageData()方法可以将图像数据从指定的ImageData对象写入画布，具体用法如下。

     context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

参数简单说明如下。

imgData：要写入画布的ImageData对象。

x：ImageData对象左上角的x坐标，以像素计。

y：ImageData对象左上角的y坐标，以像素计。

dirtyX：可选参数，在画布上放置图像的x轴位置，以像素计。

dirtyY：可选参数，在画布上放置图像的y轴位置，以像素计。

dirtyWidth：可选参数，在画布上绘制图像所使用的宽度。

dirtyHeight：可选参数，在画布上绘制图像所使用的高度。

【示例】本示例创建一个100×100像素的ImageData对象，其中每个像素都是红色的，然后把它写入画布并显示出来。

7.3.4 保存图片

HTMLCanvasElement提供一个toDataURL()方法，使用它可以将画布保存为图片，返回一个包含图片展示的data URI，具体用法如下。

     canvas.toDataURL(type, encoderOptions);

参数简单说明如下。

type：可选参数，默认为image/png。

encoderOptions：可选参数，默认为0.92。在指定图片格式为image/jpeg或image/webp的情况下，可以设置图片的质量，取值从0~1中选择，如果超出取值范围，将会使用默认值。

使用toBlob()方法，可以把画布存储到Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，具体用法如下。

     void canvas.toBlob(callback, type, encoderOptions);

参数callback表示回调函数，存储成功时调用，可获得一个单独的Blob对象参数。type和encoderOptions参数与toDataURL()方法相同。

【示例1】本示例将绘图输出到data URL，效果如图7.16所示。

     <canvas id="myCanvas" width="400" height="200"></canvas>
     <script type="text/javascript">
     var canvas = document.getElementById("myCanvas");
     var context = canvas.getContext('2d');
     context.fillStyle = "rgb(0, 0, 255)";
     context.fillRect(0, 0, canvas.width, canvas.height);
     context.fillStyle = "rgb(255, 255, 0)";
     context.fillRect(10, 20, 50, 50);
     window.location =canvas.toDataURL("image/jpeg");
     </script>

图7.16 把图形输出到data URL

【示例2】本示例在页面中添加一块画布，两个按钮，画布显示绘制的几何图形。单击“保存图像”按钮，可以把绘制的图形另存到另一个页面。单击“下载图像”按钮，可以把绘制的图形下载到本地，演示效果如图7.17所示。

图7.17 保存和下载图形