在画布上

我试图把图像在画布上绘制图像。我看了下面的教程 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images 并做它类似的东西我的画布是<canvas id="canvas" width="400" height="400"></canvas> ，我已经创建了功能在画布上

function putImage(){ 
     var img = new Image(); 
     img.src = "./path.png"; 
     var ctx = document.getElementById('canvas').getContext('2d'); 
     ctx.drawImage(img,8,8);    
    }

但图像没有出现在画布上。我已经打印的图像路径是正确的，所以我能够消除这个问题。有什么建议吗？

感谢

来源

2013-03-11 Quantico

确定图片的路径是正确的？您是否在开发者控制台/萤火虫上遇到任何错误？ – 2013-03-11 07:31:42

是的100％肯定我打印到控制台，它是正确的路径 “./dir/image.png” 在控制台中没有错误 – Quantico 2013-03-11 07:48:29

按照教程，你应该换你ctx.drawImage（）内img.load像这样

function draw() { 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    var img = new Image(); 
    img.onload = function(){ 
    ctx.drawImage(img,0,0); 
    ctx.beginPath(); 
    ctx.moveTo(30,96); 
    ctx.lineTo(70,66); 
    ctx.lineTo(103,76); 
    ctx.lineTo(170,15); 
    ctx.stroke(); 
    }; 
    img.src = '/files/4531/backdrop.png'; 
}

我希望这有助于。

来源

2013-03-11 07:51:27

详细说明为什么你必须这样做：当你设置'。 src'属性，图像是从服务器请求的，但程序不会等到图像加载完成。它继续运行，当涉及需要尚未加载的图像的ctx.drawImage方法调用时，它会忽略此调用。 – Philipp 2013-03-11 09:24:18

回答

相关问题