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????????=?" nor mal?36px?Arial";
context. stroke Style?=?"#000000";
context. stroke Text("HTML5?Canvas?Text",?90);
</script>

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

HTML5 Canvas 像素处理 ? ?HTML5 Canvas 状态

查看更多关于HTML5 Canvas toDataURL()的详细内容...