[canvas] Afficher une image aprés le chargement du body

**nouby** · 14/05/2023, 09h16

Bonjour,
je voudrais savoir comment faire pour afficher une image de fond sur un canvas après le chargement de la page html, j'ai essayé avec image.onload() mais ça ne marche pas, en plus j'aimerais bien que le canvas s'adapte à la taille de l'écran PC.

Comme on peut voir sur mon code, j'ai essayé aussi sur un div mais sans succès.
l'image pour les essais est dans le dossier principal de la page html.
Dans mon code on peut voir que j'ai donné pour le moment une taille fixe au canvas pour le test de l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function init(){
 
	image1.onload=function(){
//		document.getElementById('intro').style.backgroundImage=image1.src;
		ctx1.drawImage(image1,200,200);
	}
	image1.src = '001.jpg';
 
}

ça c'est mon code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
 
<html lang="fr">
 
<head>
 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link href="css/index.css" rel="stylesheet" type="text/css" >
	<script type="text/javascript" src="js/index.js"></script>
 
</head>
 
<body>
 
	<div id="contener">
 
 
 
		<div id="ecran">
			<canvas id="ecran1" width="800" height="600" ></canvas>
		</div>
 
		<div id="intro">Test</div>
 
 
	</div>
</body>
 
</html>
 
<script>
        var ctx1 = document.getElementById('ecran1').getContext('2d'); // Fond d'écran.
</script>>

======================================================================

EDIT : Je viens de réussir à afficher l'image sur le canvas en ajoutant ça à mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
window.onload=function(){init();};
</script>
 
 
<script>
document.addEventListener("DomContentLoaded", function(){
                function init(){
                        alert('coucou');
                }
}
 
init();
</script>

**melka one** · 14/05/2023, 09h40

jour

il faut dabord creer l'image a new image et quand "complete" est true tu affiche l'image ou aussi un onload sur la nouvelle image une image dans un canvas ne peut etre affiche qu'apres son telechargement

**nouby** · 14/05/2023, 09h46

Salut

On s'est croisé, je viens de reussir à l'afficher, j'ai edité la soluce, mais je sais pas si c'est propre comme code

Résolu

[canvas] Afficher une image aprés le chargement du body

JavaScript

Discussions similaires

Partager

Partager