您现在的位置：e-works > 百味书屋 > 书籍列表 > HTML5 Canvas核心技术—图形、动画与游戏开发 > 打印Canvas的内容

第一章 基础知识 第九节 打印Canvas的内容

    如果可以将canvas作为图像来访问，那么这对于应用程序的用户来说，通常会是件很方便的事情。比如说，如果你实现了一个像本书第2章中所讨论的那种绘图程序，那么用户会要求能够将他们所绘制的内容打印出来。

    在默认情况下，尽管每个canvas对象其实都是一幅位图，但是，它并不是HTML的img元素，所以，用户不能对其进行某些操作。比如，不能在canvas上通过右击鼠标然后将其保存到磁盘，也不能将其拖动到桌面上，稍后再打印出来。图1-18之中所显示的这个弹出式菜单，就证明了canvas并不是图像。

    还好，Canvas的API提供了一个叫做toDataURL()的方法，该方法所返回的引用，指向了某个给定canvas元素的数据地址。接下来，你可以将img元素的src属性值设置为这个数据地址，这样的话，就可以创建一幅表示canvas的图像了。

    在本书1.5节中，你已经看到了如何用Canvas的API来实现一个模拟时钟程序。图1-19之中所示的应用程序是经过修改的版本，它可以让用户做一份时钟程序的快照，并按照上面所描述的那种办法将快照以图像的方式显示出来。正如你在图1-19中看到的那样，可以在抓取快照之后的图像上右击鼠标，将其保存到磁盘中。因为图片下方所显示的那个时钟图像是一个img元素，所以也可以直接将其拖放到操作系统的桌面上。

图1-18　在canvas 上右击鼠标后所弹出的菜单

图1-19　使用toDataURL()方法来保存Canvas的图像

    图1-19之中的应用程序所实现的这种打印canvas内容的方式，是很常见的：它提供了一个控件，让用户通过该控件来抓取canvas的快照。在本应用程序中，这个控件就是那个名为“Take snapshot”的按钮。应用程序将抓取的快照显示为一幅图像，以便用户可以在其上右击鼠标来将此图像保存到磁盘中。接下来，当用户点击“Return to Canvas”按钮时，应用程序就会用原来的canvas元素来替换当前窗口中所显示的图像。这种实现方式的步骤如下：

    在HTML页面的代码中：

    ·向网页中加入一个不可见的图像元素，然后给该元素设置好id值，但是不要设定其src属性。

    ·通过CSS，调整图像的位置与大小，使其刚好覆盖在canvas之上。

    ·向网页中加入一个用于抓取快照的控件。

    在JavaScript代码中：

    ·获取指向刚才那个不可见图像元素的引用。

    ·获取指向快照抓取控件的引用。

    ·当用户激活控件以抓取快照时：

    （1）调用toDataURL()方法来获取数据地址。

    （2）将数据地址设定为不可见图像元素的src属性值。

    （3）将图像元素设置为可见，将canvas设置为不可见。

    ·当用户激活控件以返回到Canvas时：

    （1）使canvas元素可见，使图像元素不可见。

    （2）如有必要，则重绘canvas。

    现在我们来看看如何将上述步骤转化为代码。程序清单1-11列出了图1-19中那个应用程序的HTML代码。程序清单1-12列出了该应用程序的JavaScript代码。

HTML5 Canvas核心技术—图形、动画与游戏开发

实际售价以e-works战略合作伙伴京东商城当日售价为准

同类图书点击排行榜