Archief - window onload ism <canvas>

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
k

kaketoe

Legacy Member
Hallo iedereen, ik heb een vraagje over het onload attribuut van het window object.

Daar zit een functie in die wordt opgeroepen (als ik het goed begrijp) als alles in de DOM (afbeeldingen inclusief) is geladen.

Ik probeer nu heel eenvoudig een rechthoekje te tekenen in een canvas element. Dat lukt aardig, maar als de uit te voeren JS in de <head> staat, dan weigert hij te tekenen. Heel vreemd, want nochtans wacht ik tot alles geladen is.

Ik moet er wel bij zeggen dat ik zeer weinig ervaring heb met JS.
Anyway, here goes nothing:

HTML: 
<html>
<head>
<title>Projectje</title>
<script type="text/javascript">
window.onload = function draw() {
var can = document.getElementById("ex");
var con = can.getContext('2d');
con.fillStyle = "rgb(255,0,0)";
con.fillRect(30,30,50,50);
document.write("test");
}
</script>
</head>
<body>

<canvas id="ex" width="200" height="200"></canvas>

</body>
</html>

Omdat die onload niet echt elegant is met meerdere js files probeerde ik ook de addEventListener structuur, maar die faalde ook.

Weet iemand de oplossing?

mvg
D

Drone

Legacy Member
Gebruik je wel juiste syntax? Ik ben ook geen javascript expert maar je geeft een naam aan je anonieme functie?
k

kaketoe

Legacy Member
Zero Grav zei:
Ik ken zelf voornamelijk JQuery en zo wat bits en bytes van Javascript, maar bij Mozilla doen ze het alleszins zo: https://developer.mozilla.org/en/drawing_graphics_with_canvas
Klik om te vergroten...

Ja, dat had ik ook al gezien... Dat maakt gebruik van de ingebouwde events. Te vergelijken met addEventListener("load",draw,false).

Blijkbaar is dat de enige manier om zoiets werkende te krijgen. Nogal spijtig, want als ik er bv. een plugin van zou willen maken dan moet ik eerst nog een attribuut bij de body toevoegen, en dat vind ik niet zo proper.

Maarja, misschien moet ik het wel gewoon met jQuery doen met bind('load',draw).

@drone:
in JS kan men functies in variabelen opslaan. Net zoals dat in python ook kan.
D

Drone

Legacy Member
Yep, maar jij doet:

window.onload = function draw(){ };

Moet het niet dit zijn:

window.onload = function(){}

of:

function draw(){};

window.onload = draw;

Edit:
Blijkbaar mag je het ook zo schrijven als jij het deed. Ik heb het hier is getest en het rare is dat het werkt als je document.write('test') weg doet.
k

kaketoe

Legacy Member
In het tweede geval maak je gebruik van een zgn. anonieme functie, die kan je nergens anders in uw script oproepen. Het eerste geval is gewoon een shorthand voor:

function draw() {
//code
}
window.onload = draw();

En je hebt inderdaad gelijk drone. Bedankt :)
Iemand die dit vreemde gedrag kan verklaren? Ik heb het nog al eens gezien, maar dat was met "console.log". Die zorgde er ook voor dat er andere functies niet meer voltooiden.

edit: dit zegt firebug als ik er een console.trace() aan toevoeg
window.loadFirebugConsole is not a function

edit2: gevonden! Blijkbaar werkt het zo bij het tekenen op canvas:
- je tekent op de context. (en indirect dus ook op het document)
- dan doet hij alles wat je hebt gezegd (maw je tekent het vierkant)
- maar dan (bij de write expressie) zegt hij van "hier wil je iets helemaal nieuw op het document zetten, ik smijt het oude (=canvastekeningen) weg en zet dit in de plaats".

Dus blijkbaar worden operaties op het document pas uitgevoerd op het einde van de functie waarin ze aangepast wordt.

dat weten we ook alweer :)
Z

Zero Grav

Legacy Member
't Kan altijd zijn dat console.log() een conflict gaat veroorzaken met Firebug dat feitelijk ook maar een grote hoop Javascript is.
D

Drone

Legacy Member
@kaketoe
Code: 
function draw() {
//code
}
window.onload = draw();

Zit een fout in die ik veel zie en den meeste niet eens opmerken. Als je parentheses achter een functie naam zet die je niet aan het definiëren bent dan zeg je 'voer functie uit'.

Dus in jouw voorbeeld wacht draw niet op window.onload maar gaat hij deze direct uitvoeren.

Het moet dus zijn:
Code: 
window.onload = draw;

Je kan dit testen met:

Code: 
function draw(){
	alert('second')
};

window.onload = draw(); 
alert('first');

Je zou denken dat je eerst 'first' ziet omdat draw op onload moet wachten en first niet. Maar omdat je draw() zet zeg je het zelfde als 'voer deze functie uit' en zal je undefined doorgeven aan onload.
k

kaketoe

Legacy Member
Je hebt natuurlijk gelijk :)

Ik was het aan 't typen zonder te testen...
Jullie zijn allebei reuzebedankt!
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan