1

我正在尝试制作一个按钮，该按钮将打开一个新窗口，其中包含我的画布内容（画布的渲染图像）。

这是我的 JS 代码：

var canvas  = document.getElementById("thecanvas");
var dataUrl = canvas.toDataURL();
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
function clickme() {
window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}​

HTML 代码：

<input type="button" onclick="clickme()" value="OPEN"/>

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black">

但是当我点击“打开”按钮时，什么也没有发生……但我真的不明白为什么。我在很多网站上查看了教程。我什至复制并粘贴了一些代码，但仍然没有任何反应。难道我做错了什么？谢谢！

4

1 回答 1

2

首先，执行语句的顺序很重要。您需要toDataURL在绘制到画布后调用，或者生成的 dataURL 不包含该内容。

我不确定你的脚本标签是什么样的，但这里有一个工作示例，它以更简单的方式执行事件：http: //jsfiddle.net/b7G6J/

HTML：

<input id="thebutton" type="button" value="OPEN"/>

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black">

JS：

var canvas  = document.getElementById("thecanvas");
var context = canvas.getContext("2d");

// First drawing commands
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
// Then toDataURL
var dataUrl = canvas.toDataURL();

var button = document.getElementById("thebutton");
button.onclick =function() {
  window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}

​</p>

于 2012-11-05T04:01:25.327 回答