html5利用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属性

结果：