我们可以通过canvas的toDataURL()方法来获取绘制在HTML5
canvas中的内容。做法类似下面的示例代码:

varcanvas=document.getElementById;vardataUrl=canvas.toDataURL();

toDataURL()方法中返回的数据是一个经过编码的URL,它里面包含了从canvas中抓取的图形的数据。我们可以将这些数据显示在一个文本框中,例如:

varcanvas=document.getElementById;vardataUrl=canvas.toDataURL();document.getElementById.value=dataUrl;

我们还可以将抓取到的图形数据显示在一个新的窗口中,例如:

varcanvas=document.getElementById;vardataUrl=canvas.toDataURL();window.open(dataUrl,"toDataURL()image","width=600,height=200");

在下面的例子中,我们在canvas中绘制了一些文字,在下面又两个按钮,一个按钮可以将抓取到的canvas数据显示在文本框中,另一个按钮可以将抓取到的canvas数据显示在一个新的窗口中。

你的浏览器不支持HTML5 Canvas!

显示在文本框中

显示在新窗口中

返回HTML5 Canvas教程目录

相关文章

网站地图xml地图