使用 javascript 将画布添加到页面

Posted 2023-02-15

【中文标题】使用 javascript 将画布添加到页面

【英文标题】：Add canvas to a page with javascript

【发布时间】：2012-02-27 11:05:50

【问题描述】：

我正在尝试使用 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 是未定义的，因为c 为null。

谁能告诉我我做错了什么？

PS：代码设计为在 Greasemonkey 下运行，因此在 html 本身中添加画布及其 ID 不是一个可行的选择。

【问题讨论】：

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

我试图通过 id 获取画布作为某种“证明”画布已正确添加。 “您没有将 canv 添加到 DOM”是什么意思。 ?

画布只是漂浮在太空中。它需要附加到 DOM，比如document.body.appendChild(canv);，才能解决问题。

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

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

【参考方案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

【讨论】：

谢谢你这样做！有没有更优雅的方式来创建元素并添加 ID？类似 document.createElement('canvas',"canvasID"); ??

@nick2k3 不可以，在 JS 中属性需要使用 . 或 setAttributes 来设置。

最上面的例子是“非此即彼”，对吧？ （上面的例子追加了两次。）

【参考方案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

我一直在使用它，而且效果很好......

【讨论】：

嗨，杰夫。欢迎来到堆栈溢出。您能否编辑您的答案以解释为什么张贴者应该使用您的代码而不是问题中发布的代码（或任何答案）？在您处理创建图像并将图像绘制到画布上的答案中有很多“噪音”，这与提出的实际问题无关。此外，由于这个问题很老并且有一个公认的答案，你的答案应该解释一些有用的东西，而其他答案没有解释。

这是杰夫对“如何创建新画布以提取 img 标签内的图像而无需再次下载”的个人回答，但与问题无关。通常用于获取 png 图像或 base64 字符串来操作它们。通常出现在验证码上。快速浏览这里w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage

【参考方案3】：

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

没有类似第三行的内容，您的新画布永远不会真正插入到页面中。