html5 Canvas toDataURL()功能可以抓取html5 canvas的內容，從toDataURL()函數返回的數據是一個字符串，表示包含抓取的圖形數據的編碼URL。

在線示例

使用canvas toDataURL()功能可以抓取HTML5 canvas的內容。這是完成的代碼示例:

var canvas  = document.getElementById("ex1");var dataUrl = canvas.toDataURL();

從toDataURL()函數返回的數據是一個字符串，表示包含抓取的圖形數據的編碼URL。字符串可以顯示在textarea元素中，如下所示:

var canvas  = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();
 
document.getElementById("textArea").value = dataUrl;

也可以在新窗口中顯示獲取的數據。這是執行此操作的代碼:

示例

<canvas id="ex1" width="500" height="100" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas><script>
var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");
 
context.font      = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);
 
context.font        = "normal 36px Arial";
context.strokeStyle = "#000000";
context.strokeText("HTML5 Canvas Text", 90);
</script>

以下是帶有某些圖形的畫布示例。畫布下方是兩個按鈕，使您可以抓取在畫布上繪制的圖形并在按鈕下方的文本區域中顯示它，或在新窗口中顯示它。