Question

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

Answer 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";

这可以在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>

Answer 2

你的完整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>

Answer 3

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

我希望这对你有所帮助。

Answer 4

令人难以置信的是，没有人告诉我们要显示图表，我们也要包括chart.js！只需添加它就可以了：

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

画布没有显示

4 个答案: