二次利用Canvas的绘图

淡忘~浅思 2015-01-21 19 阅读

对于Canvas绘图，可以使用toDataURL()方法保存绘出的图像，然后在提供给object元素二次使用。

<p>Canvas绘图</p> <canvas></canvas> <p>还原绘图</p> <object type="image/png"></object>

js处理

<script type="text/javascript"> var canvas = document.getElementById("mycanvas"); if(canvas &&canvas.getContext) { var cxt = canvas.getContext('2d'); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); } var url=canvas.toDataURL(); //返回图片的base64编码数据,还可以传一个MIME类型格式，如image/png var img = document.getElementById("myimage"); img.data=url; //还原图片,指定了MIME，也可以用src属性 </script>

结果：

转载请注明：淡忘~浅思 二次利用Canvas的绘图