二次利用Canvas的绘图

PHPABC Html5 1,141 次浏览 , 没有评论

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go