Canvas標籤在Webmatrix中不起作用

我試圖在webmatrix中執行此代碼。但不知道爲什麼我沒有得到結果。我得到原始圖像，但不是在畫布上。我也是webmatrix的新手。Canvas標籤在Webmatrix中不起作用

這裏是我的代碼：

<!DOCTYPE html> 
<html> 

    <body> 
     <p>Image to use:</p> 
     <img id="scream" src="happy.png" alt="The Scream" width="220" height="277"> 
     <p>Canvas</p> 
     <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas> 
     <script> 
      var c = document.getElementById("myCanvas"); 
      var ctx = c.getContext("2d"); 
      var img = document.getElementById("scream"); 
      ctx.drawImage(img, 10, 10); 
     </script> 
    </body> 

</html>

來源

2014-05-14 MAS

這不是關於網頁框架和WebMatrix中，但畫布API的一個問題。

在實例化drawImage（）方法之前，代碼必須等待圖像加載。您可以通過使用圖像對象的onload屬性來完成此操作，如下例所示：

<script> 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 
     var img = document.getElementById("scream"); 
     img.onload = function() { 
      ctx.drawImage(img, 10, 10); 
     } 
</script>

來源

2014-05-14 10:08:27 GmG

Canvas標籤在Webmatrix中不起作用

回答

相關問題