Html 5 canvas laat afbeeldingen niet zien.
Ben sinds kort bezig met de html 5 canvas.
Nu lukt simpele figuurtjes lijnen en afbeelding plaatsen makkelijk
Alleen in mijn onderstaande code ben ik bezig met het opbouwen van mijn achtergrond dat als gamelevel moet dienen.
Nu krijg ik de pngtjes wel op het scherm als ik x en y niet aanpas maar zodra ik de x en of y increase
om de tiles goed op de canvas te krijgen waardoor het een 3d level lijkt van bovenag krijg ik niks terwijl ik in firebug wel de juiste x en y waardes krijg als ik de image wil plaatsen.
Iemand een idee?
Code (php)
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
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
$(document).ready(function() {
//Some variables
var canvas = document.getElementById('maincanvas');
var ctx = canvas.getContext("2d");
var tiles = [
['gras','gras','gras','gras','gras'],
['gras','water','water','water','gras'],
['gras','water','water','water','gras'],
['gras','gras','gras','gras','gras']
];
var x = 0;
var y = 0;
// iterate through the level array and draw each levelTile using drawTile()
function createLvl(){
for (var i=0; i < tiles.length; i++) {
x = x + 101;
for (var j=0; j < tiles[i].length; j++) {
drawTile(tiles[i][j]);
x= x + 101;
}
y= y + 171;
}
}
// draw a single Tile
function drawTile(type){
if (type){
var img = new Image();
img.onload = function() {
ctx.drawImage(img,x,y);
};
img.src = 'C://Users/mrozenbeek/Desktop/htmlcanvas 2/Sprites/Sprites/'+type+'.png';
}
}
function startGame(){
createLvl();
}
startGame();
});
De x en de y hebben niet meer de waarde die jij verwacht.
Onload is asynchroon. Dus, de code wacht niet tot de afbeelding geladen is. Eerst wordt de volledige for-lus doorlopen. Tegen het moment dat de eerste image geladen is, zijn x en y buiten je canvas scherm.
Mogelijke oplossing: zet de x en y in de drawTile scope. Ik heb ze hier x1 en y1 genoemd.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// draw a single Tile
function drawTile(type) {
var x1=x;
var y1=y;
if (type) {
var img = new Image();
img.onload = function() {
ctx.drawImage(img,x1,y1);
};
img.src = 'C://Users/mrozenbeek/Desktop/htmlcanvas 2/Sprites/Sprites/'+type+'.png';
}
}
function drawTile(type) {
var x1=x;
var y1=y;
if (type) {
var img = new Image();
img.onload = function() {
ctx.drawImage(img,x1,y1);
};
img.src = 'C://Users/mrozenbeek/Desktop/htmlcanvas 2/Sprites/Sprites/'+type+'.png';
}
}
Verder is er nog lijn 18. Daar zal je merken dat je op die plek de x terug moet resetten (ik veronderstel op 101).
Nieuwe lijn -> x terug op de initiële x. (Herinner je je de typ machine :) ?)
Gewijzigd op 07/01/2013 10:34:13 door Kris Peeters
Zoals ik las op fora was dat hij alleen onload aanroept als je de src "vult".
Zal het zo even doen thx het werkt nu zoals het hoort.
Weer wat te doen als ik thuis kom hahaha.
En x reset zag ik ook toen ik jou oplossing probeerde ;).
Gewijzigd op 07/01/2013 10:46:55 door Michael Rozenbeek