将图像添加到 html 画布

Question

我试图通过创建一个清除画布并绘制背景图像以填充画布的函数来在我的 html 画布中设置背景图像。我一直在试图弄清楚我哪里出错了，以及为什么预览中没有出现任何图像。 （我已经仔细检查了我的链接是否有拼写错误）

`<html>
<head>
    <title>Apple Dropper</title>
    <meta charset = "utf-8">
    <script src ="proa1.js">
        // set src of images in variables
     var canvas = document.getElementById("myCanvas");
     ctx = canvas.getContext("2d");

 canvas.width = 600;
 canvas.height = 400;


 let bg = new Image();
 bg.src = "projectimages/gifani.gif";

 let pic = new Image(0,350);
 pic.src = "projectimages/bucket.png";

 let fish = new Image(300,0);
 pic.src = "projectimages/fish.png";

 // Make sure the image is loaded first otherwise nothing will draw.

   bg.onload = function(){
      ctx.drawImage(bg,0,0);
   }
    </script>
</head>

<body>

    <h1>CPSC 1045 Apple Dropper Project</h1><br>
    <h2>Alleluia Anteros</h2>

    <!--- canvas --->
          <canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000;" >
    </canvas>
    <br> 
    <!--- control panel --->

</body>
</html>`

Answer 1

如果你想要一个常规的背景图片，使用 CSS 会更容易。您将选择 body 标记并将 background-img 属性与 URL 的值一起使用，并将图像的 URL 放在括号中。要覆盖页面，您必须使用 background-size 的属性和 cover 的值。

body{
     background-img:url(bckgrndimg.png);
     background-size:cover;
}