帆布HTML5 JavaScript代碼不工作，與canvas.toDataURL（）

Question

我沒有得到這個代碼的工作：

(function() { 
    // Creates a new canvas element and appends it as a child 
    // to the parent element, and returns the reference to 
    // the newly created canvas element 


    function createCanvas(parent, width, height) { 
     var canvas = {}; 
     canvas.node = document.createElement('canvas'); 
     canvas.context = canvas.node.getContext('2d'); 
     canvas.node.width = width || 100; 
     canvas.node.height = height || 100; 
     parent.appendChild(canvas.node); 
     return canvas; 
    } 

    function init(container, width, height, fillColor) { 
     var canvas = createCanvas(container, width, height); 
     var ctx = canvas.context; 
     // define a custom fillCircle method 
     ctx.fillCircle = function(x, y, radius, fillColor) { 
      this.fillStyle = fillColor; 
      this.beginPath(); 
      this.moveTo(x, y); 
      this.arc(x, y, radius, 0, Math.PI * 2, false); 
      this.fill(); 
     }; 
     ctx.clearTo = function(fillColor) { 
      ctx.fillStyle = fillColor; 
      ctx.fillRect(0, 0, width, height); 
     }; 
     ctx.clearTo(fillColor || "#ddd"); 

     // bind mouse events 
     canvas.node.onmousemove = function(e) { 
      if (!canvas.isDrawing) { 
       return; 
      } 
      var x = e.pageX - this.offsetLeft; 
      var y = e.pageY - this.offsetTop; 
      var radius = 10; // or whatever 
      var fillColor = '#ff0000'; 
      ctx.fillCircle(x, y, radius, fillColor); 
     }; 
     canvas.node.onmousedown = function(e) { 
      canvas.isDrawing = true; 
     }; 
     canvas.node.onmouseup = function(e) { 
      canvas.isDrawing = false; 
     }; 
    } 

    var container = document.getElementById('canvas'); 
    init(container, 200, 200, '#ddd'); 

})(); 

function hi(){ 
var canvas = document.getElementsByTagName('canvas'); 
var imageData = canvas.toDataURL(); 
    document.getElementById("his").innerHTML=imageData; 
} 

這是一個小的JavaScript代碼，這會在div一個小帆布與idcanvas。

而且，我正在嘗試使圖像保存，並將div與id的his保存的圖像寫入。現在，這是代碼停止工作的地方...我非常感謝您的幫助，謝謝！ :)

Answer 1

document.getElementsByTagName('canvas')返回一個NodeList，而不是一個單一的元素。因此，使用

function hi(){ 
    var canvas = document.getElementsByTagName('canvas')[0]; 
    imageData = canvas ? canvas.toDataURL() : "could not find a <canvas> element"; 
    document.getElementById("his").textContent = imageData; 
} 

Answer 2

圖像數據URL屬於圖像src屬性。圖片沒有innerHTML。