5

我想用画布绘制图像。但是图像没有显示出来。如果我在 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>
4

4 回答 4

1

完整的 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-18T14:17:45.227 回答
1

很确定 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";

这适用于您的 HTML 的 JSFiddle。问题是你在一个不存在的对象上调用 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-18T13:57:42.280 回答
0

您的问题是您尝试在脚本中使用画布，然后在 html 中声明它（由脚本访问，但 HTML 解析器未加载此元素）。因此，在这种情况下，document.getElementById('myCanvas')为 null，并can.getContext('2d')引发异常错误，消息为“can is null”。为了解决这个问题，您需要将访问该元素的脚本放在<canvas ...></canvas>访问该元素的脚本之前，或者在整个内容被解析和加载时执行该脚本，就像“Bjarke H. Søndergaard”和“BK”建议的那样。

我希望这对你有帮助。

于 2013-08-18T14:48:56.037 回答
0

令人难以置信的是，没有人告诉我们要显示图表，我们还必须包含 chart.js！只需添加这个，它就会工作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
于 2017-07-13T07:17:07.593 回答