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 :
L'affichage à l'air de se faire mais j'ai beaucoup d'erreurs de modif de couleurs lorsque je fais fonctionner les curseurs.
Code : 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
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>
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
Partager