使用JavaScript向页面添加画布

Question

我正在尝试使用JavaScript将画布添加到原本没有画布的页面中。 我的尝试如下：

var canv=document.createElement("canvas");
canv.setAttribute("id", "canvasID");
alert(canv.id);
var c=document.getElementById("canvasID");
alert(c.id);

问题在于第一个 alert(canv.id) 返回的是 canvasID，而第二个 alert 返回 undefined 是因为 c 为空。

有人可以告诉我错在哪里吗？

PS：该代码是设计在 Greasemonkey 下运行的，因此在 HTML 中添加 canvas 及其 ID 不是可行的选项。

- nick2k3

---

你没有将 canv 添加到 DOM 中。此外，您不必通过其ID获取画布，因为它已经在 canv 中引用了。 - ldiqual

我试图通过id获取画布，以某种“证明”画布已经被正确添加。你说的“你没有将canv添加到DOM中。”是什么意思？ - nick2k3

画布只是漂浮在空间中。它需要连接到 DOM 上，类似于 document.body.appendChild(canv); 这样的代码就可以解决问题。 - Matt Greer

DOM 是网页的实际 HTML 结构。您必须使用诸如appendChild()之类的函数将画布元素添加到 DOM 中。例如，要将其添加到 div#myDiv 中，可以编写以下代码：document.getElementById('myDiv').appendChild(canv)。 - ldiqual

@Vadzim，我不知道你是否在编辑所有的[标签：html5-canvas]，但这个标签甚至与此标签无关...另外，如果你阅读当前的[标签：canvas]摘录，你会注意到它只应该引用html5-canvas。相关：这个元帖和这个。 - Kaiido

Answer 1

使用类似于Node.appendChild( child )的方法将其添加到 DOM 中：

var canv = document.createElement('canvas');
canv.id = 'someId';

document.body.appendChild(canv); // adds the canvas to the body element
document.getElementById('someBox').appendChild(canv); // adds the canvas to #someBox

或者您可以使用 element.innerHTML。

document.body.innerHTML += '<canvas id="someId"></canvas>'; // the += means we add this to the inner HTML of body
document.getElementById('someBox').innerHTML = '<canvas id="someId"></canvas>'; // replaces the inner HTML of #someBox to a canvas

- Wouter J

---

谢谢，这就做到了！有没有更优雅的方法来创建一个元素并添加一个ID？比如像document.createElement('canvas',"canvasID")这样的？ - nick2k3

@nick2k3 不是的，在JS中需要使用.<属性名称>或setAttributes来设置属性。 - Wouter J

那个顶部的示例是想表达“要么/要么”的意思，对吧？（顶部示例会附加两次。） - ashleedawg

Answer 2

    var canvas = document.getElementById('canvas'); //finds Original Canvas
    img = document.createElement('img'); 
    img.src = 'images/a.jpg'; //stores image src

    var canv = document.createElement('canvas'); // creates new canvas element
    canv.id = 'canvasdummy'; // gives canvas id
    canv.height = canvas.height; //get original canvas height
    canv.width = canvas.width; // get original canvas width
    document.body.appendChild(canv); // adds the canvas to the body element

    var canvas1 = document.getElementById('canvasdummy'); //find new canvas we created
    var context = canvas1.getContext('2d');

    context.drawImage(img, 0, 0, canvas.width, canvas.height); //draws background image
    context.drawImage(canvas, 0, 0); //draws original canvas on top of background
    cscreen = canvas1.toDataURL(); //generates PNG of newly created canvas
    document.body.removeChild(canv); // removes new canvas

我经常使用这个，效果很好...

- Jeff P

---

嗨，Jeff。欢迎来到Stack Overflow。您能否编辑您的答案，解释为什么发帖者应该使用您的代码而不是问题中发布的代码（或任何答案中的代码）？您的答案中有很多“噪音”，涉及创建和绘制图像到画布上，这与实际提问无关。此外，由于这个问题已经很旧并且有一个被接受的答案，您的答案应该解释一些有用的东西，而其他答案没有解释的。 - Scott Mermelstein

这是Jeff对“如何创建一个新的画布来提取img标签内的图像而不需要重新下载”的个人回答，但与问题无关。通常用于获取png图像或base64字符串以进行操作。通常在验证码上看到。快速查看此处http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage - m3nda

Answer 3

var canv=document.createElement("canvas");
canv.setAttribute("id", "canvasID");
document.body.appendChild(canv);

如果没有第三行这样的语句，你新创建的画布实际上就没有被插入到页面中。

- Kevin Ennis