Javascript 使用Canvas数据URL时出现问题

我试图使work成为一个按钮，打开一个包含画布内容的新窗口（画布的渲染图像）

以下是我的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"> 

---

但当我点击“打开”按钮时，什么也没发生……但我真的不明白为什么。我在很多网站上看过教程。我甚至复制和粘贴了一些代码，但仍然没有发生任何事情。我做错什么了吗？谢谢大家!

首先，执行语句的顺序很重要。在绘制到画布后，需要调用

toDataURL

，或者生成的dataURL不包含该内容

我不确定您的脚本标记是什么样的，但这里有一个工作示例，它以一种更简单的方式执行事件：

HTML:

---

​

谢谢大家!！我必须在调用dataURL之后调用它，这样它就可以保存放在画布中的内容。再次感谢！

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

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

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");
}