Des canvas dans un canvas ?

Version imprimable

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:

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

16/02/2009, 08h53
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 ...
16/02/2009, 09h05
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 :

Citation:

mais de dessiner des éléments ne sont pas identifiables dans une vision à la DOM
16/02/2009, 09h08
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
16/02/2009, 09h29
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 ?? :mouarf:

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.
16/02/2009, 09h30
SpaceFrog

table tr et td suffiront ;)
16/02/2009, 14h39
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 :P
16/02/2009, 14h43
SpaceFrog

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

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:

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

16/02/2009, 15h15
SpaceFrog

ccsFloat ou styleFloat selon IE ou FFX
16/02/2009, 19h48
boutmos
quelquechose l'échape :

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

1 2 3 4 5 .tile { position : relative; float: left; }
çà marche mais si je fais ceci en javascript, çà ne marche pas :
Code:

1 2 3 tile.style.position = "relative"; tile.styleFloat = "left"; /* pareil avec .cssFloat */
16/02/2009, 19h51
boutmos
bon bein j'ai posté pour rien j'ai juste oublié de rajouter .style

fallait ecrire ainsi en javascript :
Code:

1 2 3 tile.style.position = "relative"; tile.style.cssFloat = "left";
pour FF donc tile.style.styleFloat