Utilisation de canvas

**Amnael** · 02/09/2016, 16h50

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

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

Merci à vous !

**mathieu** · 02/09/2016, 20h51

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

et vous pouvez factoriser votre code comme cela :

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
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

**Amnael** · 02/09/2016, 21h26

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...

**mathieu** · 03/09/2016, 00h08

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

**Amnael** · 03/09/2016, 14h36

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)

Nom : 1472902529-capture.png
Affichages : 117
Taille : 851 octets

Nom : 1472902529-capture.png
Affichages : 117
Taille : 851 octets

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

**joel.drigo** · 03/09/2016, 14h44

Envoyé par mathieu

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Amnael** · 03/09/2016, 15h13

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

**NoSmoking** · 03/09/2016, 15h14

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.

**Amnael** · 03/09/2016, 15h28

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.

**NoSmoking** · 03/09/2016, 15h36

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

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.

Utilisation de canvas

JavaScript

Discussions similaires

Partager

Partager