Pourquoi ces Canvases ne sont-elles pas rendues?

Question

Je crée une application web qui permet aux utilisateurs d'entrer un certain nombre de couleurs, en spécifiant des valeurs RVB. Lors de la soumission, l'utilisateur verra une toile avec un rectangle plein dessiné dans la couleur choisie.

Sur cette page, j'ai 7 toiles. Le premier dessine très bien, mais aucun des autres n'apparaît. Le navigateur est Safari. Voici le code approprié:

D'abord, l'élément de script dans l'en-tête, qui définit la fonction que j'utilise pour dessiner sur le canevas.

<script language="JavaScript" TYPE="text/javascript"><!-- 
function drawCanvas(canvasId, red, green, blue) { 
var theCanvas = document.getElementById("canvas" + canvasId); 

    var context = theCanvas.getContext("2d"); 

    context.clearRect(0,0,100,100); 
    context.setFillColor(red,green,blue,1.0); 
    context.fillRect(0,0,100,100); 
    } 
    // --> 
    </script> 

Ensuite, la source HTML, où j'ai mes tags de toile et certains Javascript intégré pour appeler ma drawCanvas fonction

<canvas id="canvas0" width="100" height="100"> 
    </canvas> 


    <script language="JavaScript" TYPE="text/javascript"><!-- 
drawCanvas(0,250,0,0); 
    // --> 
</script> 
. 
. //more source 
. 
<canvas id="canvas1" width="100" height="100"> 
    </canvas> 


    <script language="JavaScript" TYPE="text/javascript"><!-- 
drawCanvas(1,4,250,6); 
    // --> 
</script> 

également fourni une capture d'écran. Comme vous pouvez le voir, la toile "rouge" se présente très bien, mais la seconde, qui devrait être verte, n'apparaît pas du tout. Des idées?

Answer 1

Il y a une certaine étrangeté avec la setFillColor façon est l'interprétation des valeurs de couleur - changer le deuxième appel à drawCanvas(1,0,250,0) (au lieu de 4, 250, 6 pour les trois derniers args) et la toile verte montre très bien (sur l'affichage d'un fichier HTML local - @ Chetan suggestion vaut la peine pour les pages qui ne charge pas rapide, mais cela ne résout pas votre problème ;-). Cela se produit à la fois dans Safari et Chrome. Malheureusement je ne trouve pas de documentation pour setFillColor (la prochaine norme HTML5 utilise une approche différente et ne semble pas définir une telle méthode) donc je ne peux pas vérifier s'il s'agit d'un bug webkit (webkit étant ce que Safari et Chrome utilisent pour le rendu) ou une différence dans ce que les arguments setFillColor veut!

Modifier: J'expérimente un peu et il semble qu'il veut la composante RVB dans la gamme de 0,0 à 1,0, pas 0 à 255. Modification de l'appel à setFillColor à:

context.setFillColor(red/256,green/256,blue/256,1.0); 

apparaît donc travailler très bien.

Answer 2

Vous devez attendre jusqu'à ce que la page soit chargée jusqu'à ce que vous puissiez le faire de manière fiable document.getElementById. Vous feriez généralement des manipulations DOM dans window onload ou dans l'événement DOMContentLoaded.

Cela devrait fonctionner:

window.onload = function() { 
    drawCanvas(0,250,0,0); 
    drawCanvas(1,4,250,6); 
}