Pourquoi ma toile ne dessine-t-elle pas?

Mon élément de toile ne fonctionne pas correctement. Il ne dessinera pas un rectangle. S'il vous plaît, aidez-moi à diagnostiquer le problème. Je ne sais pas où est le problème, est-ce mon css, javascript ou html? Ai-je tout bien installé parce que je n'ai pas eu d'erreurs quand j'ai lancé mon débogueur et l'ai mis sur un serveur?Pourquoi ma toile ne dessine-t-elle pas?

index.html

<!DOCTYPE html> 
<html> 
<head> 
<title>Paco Developement</title> 
<link rel="stylesheet" href="style.css" /> 
<script src="game.js"></script> 
</head> 
<body> 
<canvas id="canvasBg" height="500" width="800"></canvas> 
<canvas id="character" height="500" width="800"></canvas> 
</body> 
</html>

style.css

* { 
padding:0px; 
margin:0px; 
} 

header, section, footer, aside, nav, article, figure, hgroup{ 
    display:block; 
} 

body { 
background:#BADA55; 
width:100%; 
height:100%; 
} 

#canvasBg { 
display:block; 
background:#fff; 
margin:100px auto 0px; 
} 

#character { 
display:block; 
margin:-500px auto 0px; 
}

game.js

var canvasBg = document.getElementById('canvasBg'); 
var bgCtx = canvasBg.getContext("2d"); 

document.addEventListener('load',drawRect,false); 

function drawRect(){ 
bgCtx.fillStyle="#FF0000"; 
bgCtx.fillRect(0,0,150,75); 
}

Source

2012-05-02 PacoDev

addEventListener doit être appelé fenêtre non le document .. – Ben

aussi, essayez de déplacer vos deux premières déclarations dans la fonction drawRect de sorte que vous êtes sûr qu'ils sont prêts avant d'essayer d'accéder – Ben

Live Demo

Changez document en window pour votre écouteur d'événement et cela devrait fonctionner pour vous.

window.addEventListener('load',drawRect,false);

Source

2012-05-02 12:48:36 Loktar

exactement mon problème aussi je avais besoin ajouter les vars dans ma fonction – PacoDev

Pourquoi ma toile ne dessine-t-elle pas?

Répondre

Questions connexes