畫布drawImage不起作用，但正確的是

我完全不熟悉javascript，但不能編程......對於我的生活，我無法弄清楚這一點。我試圖在畫布上繪製圖像。我可以得到一個矩形繪製而不是圖像。畫布drawImage不起作用，但正確的是

這裏是我的代碼：

<head> 
    <meta http-equiv = "Content-type" content = "text/html;charset=utf-8"> 
    <meta name = "viewport" id = "viewport" content = "width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/> 
    <script type = "text/javascript"> 
     function drawPic() 
     { 
      ////////////// DOESN'T WORK /////////////////// 
      var canvas = document.getElementById('mainCanvas'); 
      if (canvas.getContext) 
      { 
       var context = canvas.getContext('2d'); 
       var img = new Image(); 
       img.onload = function() 
       { 
        canvas.drawImage(img, 0, 0); 
       }; 
       img.src = "pic1.jpg"; 
      } 


      /////////////////////////////////////////////////////////////// 
      ///////////// WORKS ////////////////////////////////////////// 
      if (canvas.getContext) 
      { 
       var context = canvas.getContext('2d'); 
       context.fillStyle = "rgb(150,29,28)"; 
       context.fillRect(2, 2, 96, 96); 
      } 
     } 
    </script> 
</head> 
<body onload = "drawPic();"> 
    <canvas id = "mainCanvas"></canvas> 
</body>

來源

2012-09-14 my_overflowed_stack

好，而不是canvas.drawImage(img, 0, 0);應該在context被稱爲 - context.drawImage(img, 0, 0);。希望它有幫助:)

來源

2012-09-14 04:25:47

你是一個紳士和學者。謝謝。 –

你需要做一個AJAX調用。

添加這樣的事情在你的代碼和圖像應該加載：

window.onload = function() { 
     // make ajax call to get image data url 
     var request = new XMLHttpRequest(); 
     request.open("GET", "http://www.html5canvastutorials.com/demos/assets/dataURL.txt", true); 
     request.onreadystatechange = function() { 
      // Makes sure the document is ready to parse. 
      if(request.readyState == 4) { 
      // Makes sure it's found the file. 
      if(request.status == 200) { 
       loadCanvas(request.responseText); 
      } 
      } 
     }; 
     request.send(null); 
     };

請參見本教程的一個完整的例子：http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/

來源

2012-09-14 04:20:53

是的，只有當你想加載一個基於dataURL的圖像！如果你的圖片是本地的，你不需要。 –

畫布drawImage不起作用，但正確的是

回答

相關問題