您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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.Style = "#000000";
context.Text("HTML5 Canvas Text", 90);
</script>

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



联系我
置顶