帆布未顯示

我想用畫布繪製圖像。但圖像沒有顯示出來。如果我在JSFiddle中嘗試這段代碼，它就會起作用。我希望你能幫助我。這裏是我的腳本：帆布未顯示

window.onload = function() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    var img = new Image(); 

    imageObj.onload = function() { 
     ctx.drawImage(img, 0, 0); 
    }; 
    img.src = "http://imageshack.us/a/img19/1158/tx2a.png"; 
};

這是我怎麼把我的畫布在HTML正文：

<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas>

而且這是工作小提琴：http://jsfiddle.net/5P2Ms/454/

我希望你能幫幫我！

煥發出新的HTML代碼：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
</head> 
<body> 


<script> 
var can = document.getElementById('myCanvas'); 
var ctx = can.getContext('2d'); 

var img = new Image(); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
} 
    img.src = "http://imageshack.us/a/img19/1158/tx2a.png"; 
</script> 


<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas> 

</body> 
</html>

來源

2013-08-18 Christoph Beylage

據我所知，onload（）不支持canvas標記。 http://www.w3schools.com/jsref/event_onload.asp –

沒有，沒有錯誤。我發現這個onload（）在很多例子中。你確定這不起作用嗎？ –

@ChristophBeylage你寫了imageObj.onload。將其更改爲img.onload並嘗試。這應該是工作，至少在我的本地工作。 –

在完整的html中沒有window.onload。這就是問題

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
</head> 
<script type="text/javascript"> 
window.onload = function(){ 
var can = document.getElementById('myCanvas'); 
var ctx = can.getContext('2d'); 

var img = new Image(); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
} 
    img.src = "http://imageshack.us/a/img19/1158/tx2a.png"; 
} 
</script> 
<body> 

<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas> 

</body> 
</html>

來源

2013-08-18 14:17:45

謝謝！這是行得通！:) –

克里斯托夫你也可以將

非常確信imageObj.onload是你的問題：

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
var img = new Image(); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
}; 
img.src = "http://imageshack.us/a/img19/1158/tx2a.png";

該工程的jsfiddle與你的HTML。問題是你在一個不存在的對象上調用onload，我認爲你的意思是在你實例化到變量img的圖像上運行它。

更新：此HTML應該加載IMG爲您服務。

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Insert title here</title> 
</head> 
<body> 
    <script> 
     window.onload = function() { 
      var can = document.getElementById('myCanvas'); 
      var ctx = can.getContext('2d'); 
      var img = new Image(); 
      img.onload = function() { 
       ctx.drawImage(img, 0, 0); 
      } 
      img.src = "http://imageshack.us/a/img19/1158/tx2a.png"; 
     } 
    </script> 
    <canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas> 
</body> 
</html>

來源

2013-08-18 13:57:42

如果我使用這個腳本什麼也不顯示，無論是：S。 –

http://jsfiddle.net/bjarkehs/7rPpQ/這一切都與我的代碼的jsfiddle –

同樣的問題它的工作原理在的jsfiddle，但它不工作，當我創造我自己的html文件:( –

你的問題是你想你的HTML聲明之前使用畫布在你的腳本（通過腳本，但HTML解析器訪問沒有加載此元素）。因此，在這種情況下，document.getElementById('myCanvas')爲空，並且can.getContext('2d')引發異常錯誤，並顯示消息'can is null'。爲了解決這個，你需要把<canvas ...></canvas>該腳本，訪問該元素之前，或使這個腳本執行時全部內容進行解析，並加載恰到好處同樣的方式爲「Bjarke H.皮特」和「B.K.」建議。

我希望這對你有所幫助。

來源

2013-08-18 14:48:56

這是令人難以置信，沒有人告知，以顯示我們必須包括chart.js之爲好圖！只需添加它，它將工作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

來源

2017-07-13 07:17:07

相關問題

回答

相關問題