爲什麼圖像不能放入畫布？

我有一個畫布和一個圖像。我希望能夠將圖像拖放到畫布上。在控制檯中沒有任何東西沒有定義或任何東西..任何人都有線索？爲什麼圖像不能放入畫布？

感謝您的幫助，併爲我所有的其他職位！ :)

的javascript：

function first(){ 
    dragedPic = document.getElementById('firstPic'); 
    dragedPic.addEventListener("dragstart", startDrag, false); 
    canvas = document.getElementById('Canvas'); 
    canvas.addEventListener("dragenter", function(e){e.preventDefault();}, false); 
    canvas.addEventListener("dragover", function(e){e.preventDefault();}, false); 
    canvas.addEventListener("drop", dropped, false); 
} 
function startDrag(e){ 
    var code = '<img src="FärgadePapper.png">'; 
    e.dataTransfer.setData('Text', code); 
} 
function dropped(e){ 
    e.preventDefault(); 
    canvas.innerHTML = e.dataTransfer.getData('Text'); 
} 
window.addEventListener("load", first, false);

來源

2013-11-09 user2961869

你應該有數據作爲img本身（您檢索ById或類似）。 – GameAlchemist

我不太關注。我想，當你放棄圖像時，它會發現圖像存儲和粘貼的地方...... – user2961869

下面的代碼工作：

（http://jsbin.com/ukAFev/1/）

var dragedPic = null; 
var canvas = null; 


function first(){ 
    dragedPic = document.getElementById('firstPic'); 
    dragedPic.addEventListener("dragstart", startDrag, false); 
    canvas = document.getElementById('Canvas'); 
    canvas.addEventListener("dragenter", function(e){e.preventDefault();}, false); 
    canvas.addEventListener("dragover", function(e){e.preventDefault();}, false); 
    canvas.addEventListener("drop", dropped, false); 
} 

function startDrag(e){ 
    // the general case is to send the image id. 
    e.dataTransfer.setData('Image', 'firstPic'); 
} 

function dropped(e){ 
// e.preventDefault(); 
    var imgId = e.dataTransfer.getData('Image'); 
    var img = document.getElementById(imgId); 
    var ctx = canvas.getContext('2d'); 
    var ratio = canvas.width/img.naturalWidth; 
    ctx.save(); 
    ctx.scale(ratio, ratio); 
    ctx.drawImage(img, 0,0); 
    ctx.restore(); 
} 
window.addEventListener("load", first);

有了這個網站：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <canvas width=400 height=400 id='Canvas'>Canvas not supported on this Browser </canvas> 
    <br/> 
    <img id = 'firstPic' 
    src='http://www.tlh.ch/images/vote/zoom/4.jpg'/>  
</body> 
</html>

來源

2013-11-09 21:00:55 GameAlchemist

爲什麼圖像不能放入畫布？

回答

相關問題