web-dev-qa-db-ja.com

javascriptを使用してキャンバスをページに追加する

もともとページがなかった1つのページにキャンバスを追加するために、Javascriptを使用しようとしています。私は次のことをしようとしています：

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

問題は、最初のアラート（canv.id）がcanvasIDになり、2番目のアラートはcがnullであるために定義されていないことです。

誰が私が間違っているのか教えてもらえますか？

PS：コードはGreasemonkeyの下で実行するように設計されているため、HTML自体にキャンバスとそのIDを追加することは実行可能なオプションではありません。

javascripthtml5canvashtml5-canvasadd
34
nick2k3

DOMに追加するには Node.appendChild( child ) のようなものを使用します。

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
53
Wouter J
    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

私はこれを常に使用し、うまく機能します...

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

3行目のようなものがなければ、新しいキャンバスが実際にページに挿入されることはありません。

3
Kevin Ennis