3
votes

Le canevas HTML affiche l'image sous le canevas au lieu de l'intérieur du canevas

J'essaye d'afficher une image d'arrière-plan dans le canevas HTML5. Je me suis assuré que l'image et le fichier html sont dans le même dossier, par conséquent, l'image s'affiche. J'ai également essayé de redimensionner l'image afin de m'assurer que l'image n'est pas trop grande pour la toile, cependant, l'image continue de s'afficher sous la toile au lieu de l'intérieur de la toile. Mon code est ci-dessous:

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

javascript html canvas background-image

0 commentaires

3 Réponses :

2
votes

Ajoutez ceci à votre script- Dessinez l'image sur le canevas après son chargement.

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);   
}

2 commentaires

Ok, donc l'image est à l'intérieur du canevas. Thnaks. Existe-t-il une fonction permettant de redimensionner l'image pour qu'elle s'adapte parfaitement à l'intérieur du canevas si l'image est trop grande? Au lieu de jouer avec les paramètres de largeur et de hauteur de .drawImage

Reportez-vous à cette réponse: stackoverflow.com / questions / 23104582 /…

3
votes

L'image n'a pas été chargée / téléchargée au moment où vous essayez de l'insérer dans le canevas.

Vous pouvez ajouter votre code à la fonction window.onload et cela devrait fonctionner

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

Quant à savoir pourquoi il s'affiche sous votre canevas, vous avez un élément img avec cette image, placé après le canevas.

0 commentaires

2
votes

vous pouvez supprimer vos balises img et définir l'arrière-plan de votre canevas

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