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.

03/01/2011, 17h24	#2
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 302 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 302 Points : 4 480 Points : 4 480	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email