HTML5 Canvas toDataURL()

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

在線示例

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

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

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

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

document.getElementById("textArea").value = dataUrl;

也可以在新窗口中顯示獲取的數(shù)據(jù)。這是執(zhí)行此操作的代碼:

<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", 50, 90);
</script>

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