将图像添加到一个HTML5画布

我试图将图像添加到我的画布，但它似乎没有工作，我已经采取一看，也看不出什么毛病我的代码，但也许别人可以。将图像添加到一个HTML5画布

这是我的JS文件。

if (window.addEventListener) 
{ 
    window.addEventListener('load', onLoad, false); 
} 

function onLoad() 
{ 
var canvas; 
var context; 

function initialise() 
{ 
    canvas = document.getElementById('canvas'); 

    if (!canvas.getContext) 
    { 
     alert('Error: no canvas.getContext!'); 
     return; 
    } 

    context = canvas.getContext('2d'); 
    if (!context) 
    { 
     alert('Error: failed to getContext!'); 
     return; 
    } 

} 
} 

function draw() 
{ 
    var sun = new Image(); 
    sun.src = 'images.sun.png'; 
    context.drawImage(sun, 100, 100); 
} 

onLoad(); 
draw();

这里是我的HTML mabye这将有助于发现问题

<!doctype html> 
    <html> 
     <head> 
      <title>Test</title> <script type="text/javascript" src="javascript/canvas.js"></script> 
     </head> 
     <body> 
      <canvas id="canvas" width="800" height="600"> 
       Your browser does not support the canvas tag 
      </canvas> 

     </body> 
    </html>

来源

2012-12-09 Nigel Brook

的问题是，您在声明帆布&背景的onLoad（），但尝试访问它的draw（）。

这样，通过使它们成为全球性的问题就解决了：

var canvas; 
var context; 

if (window.addEventListener) { 
    window.addEventListener('load', function(){ 
     onLoad(); 
    }, false); 
} 

function onLoad() { 
    initialise(); 
    draw(); 
} 

function initialise() { 
    canvas = document.getElementById('canvas'); 

    if (!canvas.getContext) { 
     alert('Error: no canvas.getContext!'); 
     return; 
    } 

    context = canvas.getContext('2d'); 
    if (!context) { 
     alert('Error: failed to getContext!'); 
     return; 
    } 

} 

function draw() { 
    var sun = new Image(); 
    sun.addEventListener('load', function(){ 
     context.drawImage(sun, 100, 100); 
    }, false); 
    sun.src = 'http://puu.sh/1yKaY'; 
}

来源

2012-12-09 09:48:04 andy

法“的drawImage”我得到相同错误遗漏的类型错误：无法调用未定义 –

法“的drawImage”现在它应该为你工作。 – andy

感谢您尝试，但仍然得到错误 –

尝试绘制图像，它的onload事件

sun.onload = function() { 
    context.drawImage(sun, 100, 100); 
};

来源

2012-12-09 09:36:37

时，我想这铬调试游戏我这个错误遗漏的类型错误：无法调用未定义 –

将图像添加到一个HTML5画布

回答

相关问题