图片加载不是 canvas

Question

我正在尝试在网页上加载图片，但图片不显示。

这是 <body> 标签中的代码

<canvas height="400" width=""400"" id="c"></canvas>

                <script>
                    var c=document.querySelector("#c");
                    var ctx=c.getContext("2d");

                    var image=new Image();
                    image.onload=function(){
                        console.loge("Loaded image");
                        ctx.drawImage(image,0,0,c.width,c.height);

                    }
                    image.src="barn.jpg";
                </script>

Answer 1

我不确定你在问什么，但正如@markE 评论的那样，存在一些语法错误，我不会将其称为错误。我的看法是，您需要将 image.src="barn.jpg"; 放在和 image.onload(); 函数之前。这就是我编写代码的方式：

<canvas height="400" width="400" id="c"></canvas>
<script>
    var c=document.querySelector("#c");
    var ctx=c.getContext("2d");

    var image=new Image();
    image.src="barn.jpg";

    image.onload=function(){
        console.log("Loaded image");
        ctx.drawImage(image,0,0,c.width,c.height);

    }
</script>

注意：我不完全确定你为什么不使用 document.getElementById("c"); 而不是 document.querySelector("#C");

图片加载不是 canvas

image load not with canvas

canvas

html5-canvas