Web Chart入门（6） canvas Chart 导出图文件

Web Chart入门（6） canvas Chart 导出图文件2013-07-01 csdn oscar999介绍

使用SVG绘制的图形可以导出为svg 格式的文件，使用浏览器等可以查看。

是否可以导出为png, gif 格式的文件呢？当然是可以。

只是在 web 直接创建和操作文件是不建议的，而且存在各浏览器兼容的问题，比如IE使用ActiveX来创建新文件。

正确的做法，是在web server 端传送文件到web 端，不过对于web chart 来说，好像又多绕了一圈。

这里的介绍为了简单，没有引入web Server.

既然使用的是Canvas,则本文的内容是针对支持HTML5的浏览器而言的。

Canvas 产生图，并自动下载

<！--Add by oscar999--><！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"></HEAD><BODY><canvas id="myCanvas" width="400" height="300"></canvas><script type="text/javascript">var canvas = document.getElementById（"myCanvas"）;var ctx = document.getElementById（"myCanvas"）.getContext（"2d"）;ctx.fillStyle = "red";ctx.beginPath（）;ctx.moveTo（30, 30）;ctx.lineTo（150, 150）;// was: ctx.quadraticCurveTo（60, 70, 70, 150）; which is wrong.ctx.bezierCurveTo（60, 70, 60, 70, 70, 150）; // <- this is right formula for the image on the right ->ctx.lineTo（30, 30）;ctx.fill（）;var dataURL = canvas.toDataURL（）;dataURL = dataURL.replace（"image/png", "image/octet-stream"）;window.location.href = dataURL;</script></BODY></HTML>