码迷,mamicode.com
首页 > 其他好文 > 详细

二次利用Canvas的绘图

时间:2015-03-08 11:49:25      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:canvas

对于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的绘图

标签:canvas

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!