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 : 134
Taille : 851 octets

Nom : 1472902529-capture.png
Affichages : 134
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);
}

Utilisation de canvas

JavaScript

Vue hybride

Discussions similaires

Partager

Partager