Canvas (HTML5 & JavaScript)

**twiotrie** · 03/01/2011, 17h02

Bonjour,

Je suis débutante en développement et travaille actuellement sur l'utilisation de l'élement <canvas>. Voici mon problème :

Après avoir défini ma zone de dessin et crée une fonction draw permettant d'afficher des rectangles au clic de la souris, j'aimerais ajouter 3 boutons afin de définir la forme de la prochaine figure (carré, disque ou triangle). Comment faire ceci en javascript ?

Voici mon code actuel :

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
<!DOCTYPE html> 
<html lang="fr">
<head>
<title>Canvas</title>
<meta charset="utf-8" /> 
<style type="text/css">canvas {border:1px solid black;}</style>
<script>
var canvas;
var context;
function draw () {
  canvas = document.getElementById('Canvas');
  context = canvas.getContext('2d');
  canvas.addEventListener('click',surclic,false);
}
 
function surclic (e){
  x = e.pageX-canvas.offsetLeft;
  y = e.pageY-canvas.offsetTop;
  context.fillRect(x, y, 50, 80);
}
</script>
</head>
 
<body onload="draw()">
<canvas id="Canvas" width="500" height="500">
</canvas>
 
</body>
</html>

Je vous en remercie !

**Vil'Coyote** · 03/01/2011, 17h24

hum, à la va vite comme ça, je dirais un div masqué contenant tes boutons et au clic sur ta zone tu le fait apparaitre ou sinon visible depuis le début après une fonction jvs au click sur les bouton permettant de stockr dans une variable hidden le type sélectionné et donc lors du clic sur ton canvas tu peux alors rechercher la valeur de cette variable afin de savoir quelle forme dessiner.

Canvas (HTML5 & JavaScript)

HTML

Partager

Partager