HTML canvas tekenen (Jquery)

[Verwijderd]

Beste Forumleden,

Ik volg al een tijdje een cursus webdesign en nu zijn we aanbeland bij het

HTML canvas tekenen waar ook Jquery aan te pas komt..

We hebben de opdracht gekregen om patronen te tekenen .

Momenteel heb ik deze code :

<script>
$(document).ready(


function()
{
tekenen();
}
);

function tekenen()
{
var canvas = $("#myCanvas")[0];
var ctx = canvas.getContext("2d");


ctx.beginPath();


for (x=50;x<500;x+=50)
{

ctx.fillStyle="red";
ctx.fillRect(0,0,50,500);
ctx.stroke();


ctx.fillStyle="yellow";
ctx.fillRect(50,0,50,500);
ctx.stroke();


}

}
</script>

De rode en gele balk zouden zich over de hele canvas moeten herhalen .

Iemand enig idee hoe ik dit zou kunnen klaarspelen want geraak er niet uit

Veel dank alvast voor de hulp !

[Matszs]

Wat lukt er wel en wat lukt er niet? Waar loop je op vast? Welk gedeelte begrijp je niet? Behalve een lap javascript hebben we niet echt aanknopingspunten om je te kunnen helpen.

[Verwijderd]

Het lukt me dus niet om de rode en de gele balk over heel het canvas te herhalen .

krijg een rode balk en een gele naast getekend.

Maar dit patroon moet zich herhalen tot de 500px zeg maar over de X-as.

Rode balk ,Gele balk,Rode Balk,Gele balk ...

Hopelijk is dit al wat duidelijker voor u ?

[Matszs]

Zoek eens op wat de parameters zijn van de fillRect() (https://developer.mozilla...nderingContext2D/fillRect, https://www.w3schools.com/tags/canvas_fillrect.asp) functie, daarin heb je nu vaste waardes staan. Als je wilt wat jij beschrijft zou je de x uit de for-loop moeten meenemen in die fillRect.

[Verwijderd]

Matszs schreef op zaterdag 11 mei 2019 @ 16:31:
Wat lukt er wel en wat lukt er niet? Waar loop je op vast? Welk gedeelte begrijp je niet? Behalve een lap javascript hebben we niet echt aanknopingspunten om je te kunnen helpen.

Dit dus :

[Verwijderd]

Matszs schreef op zaterdag 11 mei 2019 @ 17:24:
Zoek eens op wat de parameters zijn van de fillRect() (https://developer.mozilla...nderingContext2D/fillRect, https://www.w3schools.com/tags/canvas_fillrect.asp) functie, daarin heb je nu vaste waardes staan. Als je wilt wat jij beschrijft zou je de x uit de for-loop moeten meenemen in die fillRect.

Dat is de bedoeling .

Maar aangezien ik de eerste waardes verander bij de fillRect door x(omdat dit de waarde is die veranderd)

gebeurt er ook niets .

Zie de uitkomst niet .

[Matszs]

Je weet wat een for-loop doet? Dat herhaald het stukje code. Als dat stukje code 10 op precies dezelfde plek een rode streep zet gaat deze niet opeens op een andere plek staan. Je zult dus zoals ik zei iets met de x uit de for-loop moeten doen in de fillRect().

Daarom, zoek nogmaals naar de functie en bekijk wat voorbeelden.

[Wintervacht]

In je loop teken je nu inderdaad 10x een rechthoek op dezelfde coördinaten, om ze mee te laten verspringen in de loop zul je dus x en x+50 als startcoördinaten in fillRect() moeten gebruiken.

[Verwijderd]

Wintervacht schreef op zaterdag 11 mei 2019 @ 17:34:
In je loop teken je nu inderdaad 10x een rechthoek op dezelfde coördinaten, om ze mee te laten verspringen in de loop zul je dus x en x+50 als startcoördinaten in fillRect() moeten gebruiken.

for (x=50;x<500;x+=50)
{


ctx.fillStyle="red";
ctx.fillRect(x,0,50,500);
ctx.stroke();


ctx.fillStyle="yellow";
ctx.fillRect(x+50,0,50,500);
ctx.stroke();
}


}


Zo bedoelt u ? dan krijg ik ook niet het gewenste resultaat.

[D4NG3R]

Verwijderd schreef op zaterdag 11 mei 2019 @ 17:49:
[...]

Zo bedoelt u ? dan krijg ik ook niet het gewenste resultaat.

Probeer gebruik te maken van de code tags

code:

[code=javascript]
Je code hier (bij voorkeur netjes met indenting en alles om het leesbaar te houden)
[/code]

Is er een reden dat je zowel rode als gele balken tekent? Het is een stuk efficiënter (en ook makkelijker) om eerst de gehele vierkant te vullen met 1 kleur, en hier vervolgens balken van de andere kleur overheen te tekenen.

Maar buiten dat om; Tel eens mee met X en kijk wat dat doet met de getekende blokken. Je tekent nu namelijk om de 50 pixels een blok van 50 pixels breed. Ofwel; Je gehele canvas word rood. (aangenomen dat de canvas 500x500 groot is)

[ Voor 17% gewijzigd door D4NG3R op 11-05-2019 18:53 ]

[Verwijderd]

D4NG3R schreef op zaterdag 11 mei 2019 @ 18:47:
[...]


Is er een reden dat je zowel rode als gele balken tekent? Het is een stuk efficiënter (en ook makkelijker) om eerst de gehele vierkant te vullen met 1 kleur, en hier vervolgens balken van de andere kleur overheen te tekenen.

Ben zo aan de slag gegaan en heb de oplossing gevonden .

Dank je wel !

[D4NG3R]

Verwijderd schreef op zaterdag 11 mei 2019 @ 19:34:
[...]


Ben zo aan de slag gegaan en heb de oplossing gevonden .

Dank je wel !

Geen probleem, maar snap je wel de fout die je zelf maakte?

Jouw oplossing kan namelijk ook gewoon werken, echter moet je dan wel de logica snappen van hoe het getekend word t.o.v. hoe je het wil tekenen.

[Verwijderd]

D4NG3R schreef op zaterdag 11 mei 2019 @ 19:48:
[...]

Geen probleem, maar snap je wel de fout die je zelf maakte?

Jouw oplossing kan namelijk ook gewoon werken, echter moet je dan wel de logica snappen van hoe het getekend word t.o.v. hoe je het wil tekenen.

Dit heeft me een heel ander inzicht gegeven over hoe ik zo een dingen kan oplossen .
en gaat me zeker verder helpen in de toekomst .

Nogmaals Dank

[D4NG3R]

Verwijderd schreef op zaterdag 11 mei 2019 @ 19:57:
[...]


Dit heeft me een heel ander inzicht gegeven over hoe ik zo een dingen kan oplossen .
en gaat me zeker verder helpen in de toekomst .

Nogmaals Dank

Een ander inzicht is natuurlijk prima, maar het kan ook geen kwaad om te snappen wat je nou eigenlijk fout deed:

Om te beginnen had je de for loop op x = 0 binnen moeten komen (Want je wil op dat punt de eerste balk tekenen)

Maar ook als je dat wel goed had gedaan, zou je tegen het volgende probleem op lopen.

De eerste keer dat je door de for loop heen gaat word er dit getekend:



Daarna word X opgehoogd met 50 (+= 50) en gaat de loop weer door (Want X is immers nog steeds lager dan 500).

Echter loop je dan tegen het volgende probleem aan: Je tekent balken van 50 pixels breed, maar verhoogt X telkens ook maar met 50. Ofwel je krijgt overlap:



Etc etc



En dat blijft zo door gaan met elke iteratie totdat je X < 500 niet meer true is.

Er word dus telkens wel een rode en gele balk getekend, maar de gele word elke keer bij de volgende stap weer overschreven door een rode balk.

De for loop had er (gebruik makend van jouw code) zo uit moeten zien voor het gewenste resultaat:

JavaScript:

for(x = 0; x < 500; x += 100) {
    
    ctx.fillStyle="red";
    ctx.fillRect(x,0,50,500);
    ctx.stroke();


    ctx.fillStyle="yellow";
    ctx.fillRect(x+50,0,50,500);
    ctx.stroke();
}

Ofwel een verhoging van += 100, zodat je bij elke iteratie twee balken van 50 pixels breed kan tekenen zonder in de volgende stap overlap te krijgen.

[ Voor 8% gewijzigd door D4NG3R op 11-05-2019 20:04 ]