二次利用Canvas的繪圖，二次canvas繪圖

二次利用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屬性</script>

結果：