HTML5 Canvas toDataURL()

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

以下是带有某些图形的画布示例。画布下方是两个按钮，使您可以抓取在画布上绘制的图形并在按钮下方的文本区域中显示它，或在新窗口中显示它。