HTML5 教程HTML5 浏览器支持HTML5 新元素HTML5 Video 视频HTML 5 Video + DOMHTML5 Audio 音频HTML5 拖放 ( drag 和 drop )HTML5 Canvas画布HTML5 内联 SVGHTML5 MathML 数学公式HTML5 Geolocation 地理定位HTML5 新的 Input 类型HTML5 表单元素HTML5 表单属性HTML5 语义元素HTML5 Web 存储HTML5 Web SQL 数据库HTML5 应用程序缓存HTML5 Web WorkersHTML 5 服务器发送事件HTML5 WebSocketHTML5 历史记录APIHTML 5 代码规范HTML5 Canvas 描边和填充HTML5 Canvas 绘制矩形HTML5 Canvas 清除画布HTML5 Canvas 路径HTML5 Canvas 渐变HTML5 Canvas 阴影HTML5 Canvas 绘制文本HTML5 Canvas 绘制图像HTML5 Canvas 合成HTML5 Canvas 状态HTML5 Canvas toDataURL()HTML5 Canvas 像素处理HTML5 Canvas 制作动画HTML5 Canvas 转换
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>以下是带有某些图形的画布示例。画布下方是两个按钮，使您可以抓取在画布上绘制的图形并在按钮下方的文本区域中显示它，或在新窗口中显示它。