Utilisation de canvas

Version imprimable

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:

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:

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

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
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);
}

Merci à vous !

vous vous êtes trompé dans "lineTo(xdest,ydest);" vous avez mis 2 fois "xdest"

et vous pouvez factoriser votre code comme cela :

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
var context;
 
function test() {
    initialiserContext();
 
    drawLine(0,  0,  0, 500);
    drawLine(26, 0, 26, 500);
}
 
 
function initialiserContext() {
    var canvas = document.getElementById("myCanvas"); 
 
    if (canvas.getContext)
    {
        context = canvas.getContext('2d'); 
    }
}
 
 
function drawLine(x0, y0, xdest, ydest) {
 
    context.beginPath();
    context.fillStyle = 'black';
    context.lineWidth = 1;
    context.moveTo(x0, y0);
    context.lineTo(xdest, ydest);
    context.stroke();
 
}

http://jsbin.com/jasufaximi/edit?js,console,output

02/09/2016, 20h26
Amnael

Ahh fichtre j'ai honte, ça m'avait échappé :'(

Merci beaucoup Mathieu !

DU coup j'ai une autre question, est-ce normal que les deux traits ne me semblent pas avoir le même design ?

Alors qu'ils sont me semblent ils construit de la même façon...
02/09/2016, 23h08
mathieu

c'est peut-être parce que le 1er trait à gauche est au bord du cadre donc il est un peu caché

1 pièce(s) jointe(s)

Pas vraiment en fait,

pour se rendre compte du problème, j'ai modifié la largeur du trait et là on voit clairement que l'on a deux objets différents pourtant issus de la même fonction

(en reprenant votre code et passant le width à 10)

Pièce jointe 219511

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
 
var context;
 
function test() {
    initialiserContext();
 
    drawLine(0,  0,  0, 500);
    drawLine(26, 0, 26, 500);
    drawLine(52, 0, 52, 500);
}
 
 
function initialiserContext() {
    var canvas = document.getElementById("myCanvas"); 
 
    if (canvas.getContext)
    {
        context = canvas.getContext('2d'); 
    }
}
 
 
function drawLine(x0, y0, xdest, ydest) {
 
    context.beginPath();
    context.fillStyle = 'black';
    context.lineWidth = 10;
    context.moveTo(x0, y0);
    context.lineTo(xdest, ydest);
    context.stroke();
 
}

03/09/2016, 13h44
joel.drigo
Citation:

Envoyé par mathieu

c'est peut-être parce que le 1er trait à gauche est au bord du cadre donc il est un peu caché

Citation:

Envoyé par Amnael

Pas vraiment en fait,

Et pourtant si !

On voit bien que l'épaisseur de la ligne de gauche est la moitiée de l'épaisseur des 2 autres : parce que la moitiée de l'épaisseur de cette ligne est en dehors de la partie visible du canvas.

Essaye ça :
Code:

1 2 3 4 5 6 7 8 function test() { initialiserContext(); drawLine(5, 0, 0, 500); drawLine(31, 0, 26, 500); drawLine(57, 0, 52, 500); }
03/09/2016, 14h13
Amnael

Donc en gros ça veut dire que l'objet que l'on dessine au point 0,0 ici la ligne représente le milieu et non le point le plus à gauche de l'objet. Quelque part c'est logique en fait j'aurais dû y penser.

Effectivement en décalant vers la droite je récupère du coup l'objet en entier.

Merci Joel pour cet éclaircissement.

Effectivement lorsque mathieu m'a parlé du cadre je m'imaginais la partie visible ce pourquoi je l'ai enlevé sur l'exemple. J'aurais du penser que l'on aurait pu avoir une partie du dessin hors canvas.

Merci bien, je vais pouvoir avancer à présent ;)
03/09/2016, 14h14
NoSmoking

Bonjour,
en reprenant l'exemple de mathieu, http://jsbin.com/jasufaximi/edit?js,console,output, la question que tu aurais dû poser est pourquoi le deuxième trait fait 2 pixels de largeur alors qu'il est défini à une largeur de 1 pixel ?

En fait le trait est tracé à partir de sa fibre « neutre », mais plutôt qu'un long discours il existe sur MDN une présentation du problème de rendu : Un exemple lineWidth, regarde le petit croquis.
03/09/2016, 14h28
Amnael

Je comprends l'idée, "je crois".

Soit on utilise une width impaire et on décale le début du dessin; soit on utilise un width pair pour remplir les pixel et dans ce cas là pas besoin de décaler.
03/09/2016, 14h36
NoSmoking

Ou encore ajouter 0.5 à la valeur de x dans ta fonction DrawLine.

Citation:

Sachant qu'une largeur de 1.0 s'étendra d'une demi-unité de chaque côté du tracer, créer le tracer de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de 1.0 et au remplissage d'un seul pixel de ligne verticale.