Question

需要帮助。无法在Dreamweaver中显示图像。我已尝试使用计算机上的图像，但仍无法显示。 HTML和JS的新手

<canvas id="test" width="650" height="600"></canvas>
window.onload = function () {
var context1 = document.getElementById("test").getContext("2d");


var imageObj = new Image();
imageObj.onload = function () {
    context1.drawImage(imageObj, 50, 25);
};
imageObj.src = "http://placekitten.com/200/300";

};

 <style type="text/css"> canvas {
 border: 1px solid black;

}

Answer 1

您可能缺少一些HTML或JavaScript核心片段，然后将所有内容放在一起。

以下是整个HTML文件代码，适用于我：

<html>
<head>
    <style type="text/css"> 
        canvas {
            border: 1px solid black;
        } 
    </style>
</head> 
<body>
    <canvas id="test" width="650" height="600"></canvas>
    <script>
        window.onload = function () {
        var context1 = document.getElementById("test").getContext("2d");

        var imageObj = new Image();
        imageObj.onload = function () {
            context1.drawImage(imageObj, 50, 25);
        };
        imageObj.src = "http://placekitten.com/g/600/650/";

    };
    </script>
</body>
</html>

P.S。您的代码中的imageObj.src链接错误（http://placekitten.com/200/300 - 它没有显示任何图片）

无法获得画布图像显示

1 个答案: