Thêm canvas vào một trang có javascript

Question

Tôi đang cố gắng sử dụng Javascript để thêm canvas vào một trang mà ban đầu không có. Tôi cố gắng để làm như sau:

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

Vấn đề là cảnh báo đầu tiên (canv.id) kết quả trong canvasID, trong khi cảnh báo thứ hai là undefined vì c là null.

Ai có thể cho tôi biết tôi đang làm gì sai?

PS: mã được thiết kế để chạy dưới Greasemonkey để thêm canvas và ID của nó trong chính HTML không phải là tùy chọn khả thi.

Answer 1

Sử dụng một cái gì đó giống như Node.appendChild(child) để thêm nó vào 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 

---

Hoặc bạn có thể sử dụng 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 

Answer 2

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

Nếu không có thứ gì đó giống như dòng thứ ba đó, canvas mới của bạn chưa bao giờ được chèn vào trang.

Answer 3

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 

tôi sử dụng tất cả thời gian và hoạt động tuyệt vời ...