HTML5 Canvas：获取canvas内容-toDataURL()

我们可以通过canvastoDataURL()获得HTML55绘制的方法 canvas中的内容。做法类似于以下示例代码:

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

从toDataURL()该方法中返回的数据是一个编码URL，包含从canvas中捕获的图形数据。我们可以在文本框中显示这些数据，例如：

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

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

我们还可以在新窗口中显示捕获的图形数据，例如：

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

window.open(dataUrl,"toDataURL() image", "width=600, height=200");

在下面的例子中，我们在canvas中绘制了一些单词，下面有两个按钮。一个按钮可以在文本框中显示捕获的canvas数据，另一个按钮可以在新窗口中显示捕获的canvas数据。

您的浏览器不支持HTML5 Canvas！

显示在文本框中    
在新窗口中显示

返回HTML5 Canvas教程目录