我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

目录

引子

初级阶段

思路

实现效果

结果

核心代码

进阶阶段

反思

分析

原理

实现效果

核心代码

我们想打印一个Canvas的内容，会考虑使用右键导出到磁盘来操作：

在Safari浏览器中对Canvas元素右键：

这里提供了一个Canvas的页面，可以选择右键Canvas查看效果

https://827652549.github.io/Canvas/Unit1/Clock.html

Canvas画布在某些浏览器里是不支持单独打印的，比如safari（上图）等等，但chrome就可以。

为了让所有浏览器都支持能打印canvas，我们考虑让Canvas变成元素，这样便支持右键导出到本地磁盘了。

Canvas的API提供了toDataURL()的方法，该方法返回的引用，指向了给定canvas元素的数据地址，我们可以将img的src属性设置成这个返回值就行。

我们实现这个方法到一个按钮之中，然后通过点击按钮生成对应img图并覆盖原canvas即可

https://827652549.github.io/Canvas/Unit1/ClockReturnImage.html

转化img之前右键

转化img之后右键 

点击按钮转化之后就能够通过右键进行操作了。

 这是相对于时钟项目的增加的代码

点击按钮，canvas和img的相互转化，通过右键查看不同效果

但是我们的用户可不愿意接受每次导出图像还要刻意地点击一个按钮，他们更希望直接右键导出。

我们可以考虑离屏Canvas，实现不经过用户干预的情况下完成“显示模式”的切换。

离屏Canvas

在大多数情况下，都可以把背景存储在一个或多个离屏Canvas中，并将这些离屏Canvas中的某一部分绘制到屏幕上，以此来大幅度提高应用程序的性能。

程序每秒钟都会将时钟绘制到离屏canvas中，然后将canvas的数据地址设置为图形元素的src属性，于是就形成了一副反映离屏canvas内容变化的动画图像。

https://827652549.github.io/Canvas/Unit1/ClockReturnImage2.html

直接右键即可导出