插入圖像的HTML畫布代碼不工作

我試圖在畫布中插入圖像，但我的代碼does not似乎無法正常工作。我得到一個適當的背景顏色的畫布，但不知何故圖像不顯示。這是我的代碼。帆布上的字符 .canvas1 { background-color：grey; border：1px solid; } 插入圖像的HTML畫布代碼不工作

</head> 
<body> 
    <div id="imagediv"> 
     <img id="spear1" src="E:\html-files\spear.png" style="height:150px; width:150px" draggable="true" ondrag="drag()" > 
    </div> 
    <div id="canvasdiv"> 
     <canvas id="mainCanvas" class="canvas1" height="500px" width="600px"></canvas> 
    </div> 

    <script> 
     var canvas=document.getElementById("mainCanvas"); 
     var ctx=canvas.getContext("2d"); 
     var img=document.getElementById("spear1"); 
     ctx.drawImage(img,0,0,160,160); 

    </script> 
</body>

來源

2013-11-26 Asim Malik

可能的重複[如何從系統獲取圖像以加載在HTML5中的畫布]（http://stackoverflow.com/questions/11644192/how-to-fetch-image-from-system-to-load-in-canvas-in-html5） –

您可以繪製圖像，也可以從外部位置。你不能做「getImageData」。但這裏的問題是圖像可能尚未完全加載 – devnull69

http://jsfiddle.net/Z4TfC/ – Triode

嘗試將圖像與相對路徑直接鏈接，或者一個http://jsfiddle.net/combizs/5L7uL/。

這裏是linking to a file stored online

<img id="spear1" src="http://jamesmcgillis.com/upload/google_logo_001_small.jpg"...

一個例子，如果它不爲你工作，請確保您的瀏覽器支持畫布 :-)

來源

2013-11-26 11:32:33

如果你想在畫布插入一張圖片，圖像必須在插入之前加載，因此您的代碼可能如下所示：

var canvas=document.getElementById("mainCanvas"); 
var ctx=canvas.getContext("2d"); 
var img=document.getElementById("spear1"); 
img.onload = function(){ 
    ctx.drawImage(img,0,0,160,160); 
}

來源

2013-11-26 11:34:40

插入圖像的HTML畫布代碼不工作

回答

相關問題