首页 > 其他 > 详细

二次利用Canvas的绘图

时间:2015-03-08 11:48:20      阅读:270      评论:0      收藏:0      [点我收藏+]

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

<p>Canvas绘图</p>
<canvas id="mycanvas" width="300" height="150"></canvas>
<p>还原绘图</p>
<object type="image/png" id="myimage"></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的绘图

原文:http://blog.csdn.net/u011043843/article/details/44131519

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!