帆布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。