Question

我希望使用单独的Javascript文件在我的HTML页面的画布上绘制图像。我到目前为止的HTML很好，我的问题似乎在于脚本。这就是我目前所拥有的：

    function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');

    var pic = new image();
    pic.src="http://i1273.photobucket.com/albums/y418/Cloudtwonj/Backgroundtest_zps2a6a6b51.jpeg";
    pic.addEventListener("load", function(){canvas.drawImage(pic,0,0,x.width,x.height)}, false);
}
window.addEventListener("load", doFirst, false);

有谁能告诉我我可能做错了什么或忘了？

Answer 1

构造函数是Image，而不是image - 大写很重要！

var pic = new Image();

    function doFirst() {
      var x = document.getElementById('canvas');
      canvas = x.getContext('2d');

      var pic = new Image();
      pic.src = "http://i1273.photobucket.com/albums/y418/Cloudtwonj/Backgroundtest_zps2a6a6b51.jpeg";
      pic.addEventListener("load", function() {
        canvas.drawImage(pic, 0, 0, x.width, x.height)
      }, false);
    }
    window.addEventListener("load", doFirst, false);

<canvas id="canvas"></canvas>

在Javascript中将图像绘制到画布上

1 个答案: