Добавить изображения к html canvas - PullRequest
Новая
       106

Добавить изображения к html canvas

0 голосов
/ 21 марта 2020

Я пытаюсь установить фоновое изображение на моем html холсте, создав функцию, которая очищает холст и dr aws фоновое изображение, чтобы заполнить холст. Я пытался выяснить, где я ошибся и почему изображения не отображаются при предварительном просмотре. (Я уже дважды проверил ссылки на наличие орфографических ошибок) 

`<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>`

1 Ответ

0 голосов
/ 21 марта 2020

Если вам нужно обычное фоновое изображение, было бы намного проще сделать это, используя CSS. Вы должны выбрать тег body и использовать свойство background-img со значением URL и поместить URL изображения в круглые скобки. Чтобы покрыть страницу, вы должны использовать свойство background-size со значением cover. 

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