Bonjour,
j'essaie de me familiariser avec la balise canvas d'html mais sans succès.
Ici, je voudrais bêtement tracer deux lignes sur toute la longueur de mon canvas.
Sauf que je n'en ai qu'une seule qui est tracé et qu'elle n'a pas la dimension que je voudrais.
Les tentatives de modifications que j'ai faite sur les distances ne changent rien...
Quelque chose m'échappe visiblement, en espérant que vous pourrez y voir plus clair que moi^^
Html
Code html : 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 <html> <head> <title>Editeur de kifu</title> <meta charset="UTF-8"> <meta name="description" content="Jeu de go: Kifu en ligne"> <link rel="stylesheet" href="index.css"> <script type="text/javascript" src="index.js"></script> </head> <body onload="test();"> <h1>Editeur Kifu</h1> <div id="info">Info</div><!-- Zone d'en-tete info partie --> <br/> <div id="goban"><canvas id="myCanvas"> Votre navigateur ne supporte pas canvas. </canvas></div><!-- Zone graphique --> <br/> <div id="coupSup">Coup Sup</div><!-- Zone pour les coups qui ne peuvent être montré sur goban car pierre déjà joué avant et capturé par la suite --> </body> </html>
Css
Code css : 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 h1{ text-align: center; } #info{ border-style: solid; border-width: 2px; } #goban{ border-style: solid; border-width: 2px; } #coupSup{ border-style: solid; border-width: 2px; } #myCanvas{ width:500px; height:500px; border:1px solid red; margin-left: 25%; margin-top: 1%; margin-bottom: 1%; }
Javascript
Merci à vous !
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 function drawLine(x0,y0,xdest,ydest){ canvas = document.getElementById("myCanvas"); if (canvas.getContext) { context = canvas.getContext('2d'); } context.beginPath(); context.fillStyle='black'; context.lineWidth=1; context.moveTo(x0,y0); context.lineTo(xdest,xdest); context.stroke(); return context; } function drawLine2(context,x0,y0,xdest,ydest){ context.fillStyle='black'; context.lineWidth=1; context.moveTo(x0,y0); context.lineTo(xdest,xdest); context.stroke(); return context; } function test(){ context=drawLine(0,0,0,500); drawLine2(context,26,0,26,500); }
Partager