Discussion :

[boutmos]

J'essais d'inserer des canvas dans un canvas mais visiblement je n'ai pas de resultats et aucun message d'erreur. Est ce possible ou alors nous n'avons que la methode getContext() et ses méthodes pour y inserer quelquechose ?

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
33
34
35
36
37
38
39
40
 
function $(id){
	return document.getElementById(id);	
}
 
function createTable(nbLines, nbRows, nbMines){
// On crée le tableau a 2 entrées
	var table = new Array();	
	for (var i=0; i<nbLines; i++){
		table[i] = new Array(nbRows);
	}
 
// Création de la surface de jeu
	var bigCanvas = document.createElement("canvas");
		bigCanvas.id = "bigCanvas";
		bigCanvas.width = 16*nbRows;
		bigCanvas.height = 16*nbLines;
		bigCanvas.style.border = "solid 1px green";
		document.body.appendChild(bigCanvas);
 
	var cpt= 0;	
	for (var k=0; k<table.length; k++) {
		for (var j=0; j<table[k].length; j++) {
			createTile(cpt);
			cpt++;
		}
	}
 
}
 
function createTile(nb) {
	bigC = $("bigCanvas");
	// canvas incompatible IE	
	var tile = document.createElement("canvas"); 
		tile.id = nb;
		tile.className = "tile";
		tile.width = 16;
		tile.height = 16;
		bigC.appendChild(tile);
}

[SpaceFrog]

heu déja au départ c'est quoi canvas
ce n'est pas un élément standard html c'est une extension introduite par mac dans webkit ...

[boutmos]

Oui c'est bien çà , puis adopté par les dev de Gecko (FF) et Opera ... wikiiiiii

Bon cette phrase là en dit long et donc je pense pas que c'est possible, je voudrais juste que vous confirmez si je me trompe ou pas :

mais de dessiner des éléments ne sont pas identifiables dans une vision à la DOM

[SpaceFrog]

à ce jour selon moi la seul solution qui permette de façon satisfaisante de faire du dessin avec javascript est de passer par des librairies du typoe de celle proposée par walterzorn

[boutmos]

Ok merci du tuyaux --> bookmarked

Mes besoins de generer des dessins en javascript ne nécessitent pas l'utilisation d'une librairie car je cherche juste a utiliser des cases qui sont contenues dans une case conteneur. DIV vous avez dit ??

Je pensais utiliser la methode canvas pour faire un demineur car j'en avais fait un en java il y a très lonnnnngtemps et j'avais utilisé ceci.

[SpaceFrog]

table tr et td suffiront

[boutmos]

bah oui mais moi j'aime faire compliqué et j'essai avec des div , j'ai un mal de chien a bien positionner mais j'suis pas loin la

[SpaceFrog]

vive le css float et clear
en javascript c'est stylefloat

[boutmos]

c'est pas style.float ?

Sinon suis emmebté j'arrive a créer mon damier en position absolute mais en relative j'ai un mal de chien ...

c'est pas vraimmetn un prob de javascript mais je vous colle le code qd mm au cas ou et je precise que je tiens a pas utiliser les tableaux !!!!

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
function $(id){
	return document.getElementById(id);	
}
 
function createTable(nbLines, nbRows, nbMines){
// On crée le tableau a 2 entrées
	var table = new Array();	
	for (var i=0; i<nbLines; i++){
		table[i] = new Array(nbRows);
	}
 
// Création de la surface de jeu
	var bigCanvas = document.createElement("DIV");
		bigCanvas.id = "bigCanvas";
		bigCanvas.style.width = (16*nbRows)+(2*nbRows)+"px";	//2*nbRows = prise en compte de la bordure
		bigCanvas.style.height = (16*nbLines)+(2*nbLines)+"px";
		bigCanvas.style.border = "solid 1px green";
		document.body.appendChild(bigCanvas);
 
	var cpt= 0;	
	for (var j=0; j<table.length; j++) {
		for (var k=0; k<table[j].length; k++) {
			var tile = document.createElement("DIV"); 
			tile.id = cpt;
			tile.className = "tile";
			tile.style.position = "absolute";
			//tile.style.display = "block";
 
 
			tile.style.left = k*18+"px";
			tile.style.top = j*18+"px";
 
 
 
			tile.style.width = 16+"px";
			tile.style.height = 16+"px";
 
			numb = document.createTextNode(cpt);
			tile.appendChild(numb);
 
			tile.onclick = function(){alert(this.id);}
			bigCanvas.appendChild(tile);
			cpt++;
		}
 
		alert(tile.style.top);
	}	
}

[SpaceFrog]

ccsFloat ou styleFloat selon IE ou FFX

[boutmos]

quelquechose l'échape :

si le declare les propriétées en CSS telles quelles :

Code :

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

1
2
3
4
5
 
.tile {
position : relative;
float: left;
}

çà marche mais si je fais ceci en javascript, çà ne marche pas :

Code :

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

1
2
3
 
tile.style.position = "relative";
tile.styleFloat = "left";  /* pareil avec .cssFloat */

[boutmos]

bon bein j'ai posté pour rien j'ai juste oublié de rajouter .style

fallait ecrire ainsi en javascript :

Code :

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

1
2
3
 
	tile.style.position = "relative";
	tile.style.cssFloat = "left";

pour FF donc tile.style.styleFloat