我想用 Canvas 绘制图像。但是图像没有显示出来。如果我在 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";
};
这就是我将 Canvas 放置在 HTMl 主体中的方式:
<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas>
这是工作中的 fiddle :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>
最佳答案
您的完整 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>
关于javascript - Canvas 未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18299777/