javascript - 尝试在 HTML5 画布中显示图像

Question

我已经尝试了所有在线的代码变体。我只想在画布上显示图像。我试过这个网站的代码。

window.onLoad=function(){
  function draw(){  
    var ctx = document.getElementById("canvas1").getContext("2d");  
    var img = new Image();  
    img.src = 'images/ball.png';  
    img.onload = function(){  
        ctx.drawImage(img,0,0);  
    };
  };
};

问题不是文件路径，而是在没有图像文件夹的情况下进行了测试。控制台中没有错误。谢谢。

Answer 1

在 google 中进行一次搜索，您将获得完整的 jsfiddle 示例：

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(img, 0, 0);
}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

http://jsfiddle.net/jimrhoskins/Sv87G/