上面的例子很好理解，不过为了了解“状态入栈出栈”的情况，我们把上面例子改造一下：

<canvas> 您的浏览器不支持canvas，建议使用最新版的Chrome </canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "yellow"; //注意这里多了一行状态定义 ctx.save(); //注意这里多了一行状态保存 ctx.fillStyle = "green"; ctx.fillRect(20,20,100,100); ctx.save(); ctx.fillStyle = "red"; ctx.fillRect(40,40,60,60); ctx.restore(); //推出最后一个入栈的状态（fillStyle = "green"） ctx.restore(); //再次推出最后一个入栈的状态（fillStyle = "yellow"），注意green已经在上次restore推出了，故这次取到的是yellow ctx.fillRect(60,60,20,20); //填充黄色的矩形 </script>

就像注释说明的那样，最终绘制的小矩形是黄色而非绿色：

最后介绍的是 toDataURL() 方法，它能把当前画布的内容转换为data类型的URL格式。 等等，“data类型的URL格式”又是什么来的？ 有时候我们会在某些页面（比如github404页面）看到这样的图片：

其src对应的是一串“data:image/png;base64....”的data类型URL格式，返回的base64图片数据流，可以减少对服务器的图片请求（当然缺点是无法缓存在客户端）。这种格式这就是我们上面提到的东西。 那么 toDataURL() 方法的好处就显而易见了——我们可以把当前画布内容转换为一张图片。

toDataURL() 方法直接作用于canvas对象，而非context2D对象，其格式通ky"http://www.it165.net/qq/" target="_blank">qqjujwvcD4KPHA+dXJsID0gY2FudmFzLnRvRGF0YVVSTCg8ZW0+IFsgdHlwZSwgLi4uIF08L2VtPiApPC9wPgo8cCBjbGFzcz0="VJ_note">参数type表示返回文件的MINE类型，若未指定type，则默认返回的格式必须为PNG格式。如果canvas没有任何像素，则返回值为：“data:,”，这是最短的data:URL，在text/plain资源中表现为空字符串。
type的值可以在image/png，image/jpeg，image/svg+xml 等MIME类型中选择。如果是image/jpeg，可以有第二个参数，如果第二个参数的值在0-1之间，则表示JPEG的质量等级，否则使用浏览器内置默认质量等级。

我们来个小例子：

<canvas></canvas> <button>点我查看图片</button> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(20,20,100,100); ctx.save(); ctx.fillStyle = "red"; ctx.fillRect(40,40,60,60); ctx.restore(); ctx.fillRect(60,60,20,20); function openImg(){ var image = c.toDataURL("image/png"), //注意toDataURL是canvas对象方法，而不是context2D的属性 w = window.open('about:blank'); w.document.write("<img src='"+image+"' />"); } </script>

点击“点我查看图片”的按钮后会弹出一个新页面，上面有我们生成的base64编码形式的图片（跟canvas上绘制的内容一致）：

但由于该图片是不存在于任何文件目录上的，自然也无法直接下载该（带后缀名的）文件，如果想要地道地生成一张图片供用户下载，则需要后端配合了（可以参考这里）。
另外有一点要注意的，也就是我们在第五章提到的，如果在canvas中绘制了非本地的图片，从安全性考虑将无法对其进行读操作，这种情况下如果执行toDataURL自然也会报错。不过如果资源开启了CORS，则有办法避开同源策略的阻拦（可以参考这里）。

自此，canvas的api我们基本都遍历了一遍，希望能让来此学习的朋友有所收获，共勉~