Utilisation de range et canvas

Version imprimable

Je débute en javascript et je me fais la main avec la balise canvas. J'avais besoin de faire une petite boîte à couleurs avec pour l'instant trois sliders et un un affichage dans un canvas. Ci-joint ce que j'ai essayé de faire :

Code:

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
34
35
36
37
38
39
40
41
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>boîte à couleurs</title>
    </head>
    <body>
        <canvas id="canvas" width="1024" height="350">
            <p> votre navigateur ne supporte pas Canvas. Mettez-le à jour</p>
        </canvas>
        <p>
            <input type= "range" id="rouge" min="0" max="255" value="0" step="1"  onchange="dessiner()">
            <input type= "range" id="vert" min="0" max="255" value="0" step="1"   onchange="dessiner()">
            <input type= "range" id ="bleu" min="0" max="255" value="0" step="1"  onchange="dessiner()">
        </p>
 
          <script>
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');
            var curR = document.getElementById("rouge");
            var curV = document.getElementById("vert");
            var curB = document.getElementById("bleu");
 
            function dessiner()
            {
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                drawpanel();
            }
 
            function drawpanel() {
                var coul = 256 * 256 * curR.value + curV.value * 255 + curB.value * 1;
                ctx.fillStyle = '#' + coul.toString(16);
                ctx.fillRect(10, 10, 300, 300);
            }
            window.onload=drawpanel;
        </script>
 
    </body>
</html>

L'affichage à l'air de se faire mais j'ai beaucoup d'erreurs de modif de couleurs lorsque je fais fonctionner les curseurs.
Est-ce que vous pouvez me corriger...je pense qu'il doit y avoir des erreurs de codage.
Ce n'est pas évident quand on se lance dans un nouveau langage...

Merci pour votre aide :lol:

17/03/2015, 19h20
NoSmoking

Bonjour,
tu peux faire quand même plus simple en passant par la couleur exprimée en rgb ou rgba

Code:

ctx.fillStyle = 'rgb(' + curR.value + ',' +curV.value +',' +curB.value +')';
17/03/2015, 19h26
Archimède

oui mais je veux afficher la valeur en hexa après, c'est pour ça que j'ai besoin de ma variable coul...
:D

sinon, ça plante grave, ce n'est pas top ! pas toujours de réaction du curseur quand je les déplace...

merci pour ta réponse :lol:
17/03/2015, 19h41
Archimède

Oups, je viens de remplacer par rgb() . Pour affecter le filllStyle, c'est en effet nettement plus efficace !

merci résolu ( je ne pensais pas que le fait de passer par la valeur hexadécimale plutôt que par les valeurs décimales me donnerait un tel ralentissement...)
17/03/2015, 19h58
NoSmoking

Tu aurais également pu passer par une fonction de conversion de rgb to hex, il doit en exister des milliers sur la toile.
17/03/2015, 21h27
headmax

canvas slide input Mozilla bug onchange event on input type=range is handled differently across browsers
Salut juste un rajout pour le problème d'asynchrone sur l'input lorsqu'on a ce genre de slide sous firefox il y a un petit patch rajouter car l'événement onchange présente un bug sous FF.
Le trigger de l’événement se déclenche après relâchement et pas lors de mouvement slide.

Un petit event propre a Firefox, Safari and Chrome,

https://bugzilla.mozilla.org/show_bug.cgi?id=853670
Code:

1 2 <input type= "range" id="rouge" min="0" max="255" value="0" step="1" oninput="dessiner()" onchange="dessiner()">
18/03/2015, 08h29
Archimède

Merci à vous deux pour le complément...

@+