HTML canvas отображает изображение под холстом, а не внутри холста - PullRequest
Новая
       18

HTML canvas отображает изображение под холстом, а не внутри холста

0 голосов
/ 02 января 2019

Я пытаюсь отобразить фоновое изображение внутри HTML5 canvas. Я убедился, что изображение и HTML-файл находятся в одной папке, поэтому изображение отображается. Я также попытался изменить размер изображения, чтобы убедиться, что изображение не слишком велико для холста, однако изображение продолжает отображаться под холстом, а не внутри холста. Мой код ниже: 

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>Opening screen</title>
</head>
<body>
<img>
<canvas id="canvas"
        style =
                "width: 700px;
                 height: 500px;
                 border: 1px solid #000000;
                 padding-left: 0;
                 padding-right: 0;
                 margin-top: 40px;
                 margin-left: auto;
                 margin-right: auto;
                 display: block;">
</canvas>
<img id="sky"  src="sky.png">
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("sky");
    ctx.drawImage(img, 10, 10);
</script>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 02 января 2019

Изображение не загружено / загружено к тому времени, когда вы пытаетесь вставить его в холст.

Вы можете добавить свой код в функцию window.onload, и он должен работать 

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("sky");
    ctx.drawImage(img, 10, 10);
}

Что касается того, почему он отображается под вашим холстом, у вас есть элемент img с этим изображением, помещенный после холста.

0 голосов
/ 02 января 2019

вы можете удалить теги img и установить фон для вашего холста 

<canvas id="canvas"
        style =
                "width: 700px;
                  background: url(https://placekitten.com/1000/1000) no-repeat top center;
                  background-size:cover;
                 height: 500px;
                 border: 1px solid #000000;
                 padding-left: 0;
                 padding-right: 0;
                 margin-top: 40px;
                 margin-left: auto;
                 margin-right: auto;
                 display: block;">
</canvas>
0 голосов
/ 02 января 2019

Добавьте это в свой скрипт - нарисуйте изображение на холсте после его загрузки. 

var background = new Image();
background.src = "www.xyz.com/background.png";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    ctx.drawImage(background,0,0);   
}
...