2011-01-27 6 views
0

J'utilise le code suivant. Cela fonctionne bien mais le problème est que quand je change la couleur de mon crayon, alors les choses que j'ai déjà dessinées sur la toile changent aussi. Je n'arrive pas à comprendre pourquoi cela se passe et comment y remédier, Any Idea?Toile HTML5 - Coloriage Problème

<script type="text/javascript"> 

function cnvs_getCoordinates(e) { 

    x = e.clientX + document.body.scrollLeft; 
    y = e.clientY + document.body.scrollTop; 
    var c = document.getElementById("coordiv"); 
    var context = c.getContext("2d"); 
    context.lineWidth = 5; 
    context.strokeStyle = document.getElementById("dcol").value; 

    if (started == 1) { 
     context.lineTo(x, y); 
     context.stroke(); 
    } 
    else { 
     context.moveTo(x, y); 
    } 
} 

function a() { 
    started = 1; 
    context.beginpath(); 
} 

function b() { 
    started = 0; 
    context.closePath(); 
} 

</script> 

La partie HTML est

<body> 
<div style="border: thin solid black">hi 
    <canvas id="coordiv" onmousemove="cnvs_getCoordinates(event)" onmousedown="a()" onmouseup="b()" > </canvas> 

    <select id="dcol" name="Colour"> 
       <option value="black" selected="selected">Black</option> 
       <option value="red">Red</option> 
       <option value="green"> Green</option> 
       <option value="blue">Blue</option> 
       <option value="white">** ERASER **</option> 
      </select> 
</div> 
</body> 
+0

Pourriez-vous s'il vous plaît poster plus de votre code HTML et/ou JavaScript? Il manque certaines choses, donc votre code d'exemple ne fonctionne pas actuellement. –

+0

Ok Monsieur, j'ai mis à jour le code maintenant – Yahoo

Répondre

1

Il y avait quelques choses bizarres au sujet de votre code que je pris la liberté de fixation. Par exemple, pas besoin de continuer à appeler getContext() tout le temps, il suffit de l'appeler une fois. Idem pour getElementById() pas besoin de l'appeler plus d'une fois. J'ai également déplacé vos événements hors de l'étiquette de toile et dans le javascript. J'ai été vraiment intrigué par votre problème quand je l'ai vécu pour la première fois. L'ordre de vos appels à stroke() et closePath() semblait un peu bancal ... J'ai corrigé ça, mais ça ne s'est pas avéré être le problème ... à la fin votre seul problème était que vous écriviez "beginpath() "au lieu de" beginPath() ".

Regardez le fixed version on jsFiddle.

+0

Monsieur, en fait j'ai appelé cela getElementById() ici juste au script :) Merci pour la réponse Monsieur, Mais le code que vous avez écrit en ce que la sortie vient seulement quand la souris est libérée. Je voulais que cela soit réfléchi sur chaque mouvement de la souris (comme dans la peinture Brush) – Yahoo

+0

Never Mind. Je l'ai eu monsieur :) Merci – Yahoo

+0

Oups! Cela n'a pas fonctionné! Sir Aidez-moi s'il vous plaît – Yahoo