html5利用Canvas的绘图的例子
发布时间：01/15 来源： 浏览：
关键词：
html5中Canvas是一个非常强大的功能了，我们很多初学html5的朋友都会支研究一些关于Canvas的用法，下面整理了两个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属性
结果：
