+1 szavazat
által 

A CodeBerry-s alapok gyakorlása/feltételek gyakorlása/páratlan piramis feladatában egy adott pontból 3 px-ént egy vonalat kellene húzni az x tengely mentén a felezővonalig. (https://orange.codeberryschool.com/lessons/practice-the-basics/fopurt/1)

Egy vonalat sikerült meghúznom, de hogy tudom megoldani, hogy bejárja az egész canvas felezővonalát?

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');


var cw = 450;
var ch = 300;
var x = cw/2;
var y = ch/2;

for (var i = 0; i < 50; i++) {
  context.beginPath();
  context.strokeStyle = "red";
  context.moveTo(x,0);
  context.lineTo(0,y);
  context.stroke();
   if ( i % 2 === 0){
  
   } else if (i % 2 != 0){
     
   }
};

1 válasz

0 szavazat
(480 pont) által 

szia,

a kódod perpill nem a feladatot csinálja :)

amit leírtál a következőt csinálja
50 alkalommal
- kezdjen új útvonalat
-ami vörös színű legyen
-mozgassa el kezdőpontot a cw/2,0 -> (225,0) pozicióba
- húzzon egy vonalat a 0,ch/2 (0,150)be
- színezze meg a körvonalat
azt helyesen láttad, hogy csinálnod kell 2 feltételt, ahol az egyik hogy ha 2vel osztva az iteráció száma a maradék 0, akkor csináljon valamit és
ha nem 0 akkor megint....

az iteráció végén adjon az indexhez 1et

a kérdésedre válaszolva a megoldás kézenfekvő :)

  1. defináld először kívül az összes változót
    cons cw=canvas.width;
    cons ch=canvas.height;
    azért konstans, mert ez nem fog változni!

  2. kezd el a rajzolást
    context.beginPath();

  3. el kell mozgatnod a kezdőpontot a horizontális felezővonalig
    context.moveTo(0, ch/2).

  4. ezután jön a ciklus
    0tó l kell indulnia, be kell járnia a cw-t :D -> folyt.köv később :D
    4.a ha kiindulási koordináta páros, akkor a canvas felső élének felezőpontjába (cw/2,0)
    4.b.ha nem páros, akkor a canvas alsó élének felezőpontjába. (cw/2,ch)
    ha a feltétel lefutott, mi a következő lépés, azaz mi hajtódjon vége az iteráció után?
    itt a folyt :D ->
    -rajzolja ki a vonalat
    - adjon az X koordinátához 3.at
    - mozogjon ebbe a koordinátába vízszintesen, tehát y nem változik
    - és vizsgálja meg ezt az x értéket, tehát az iteráció újrakezdődik
    ha észreveszed, összefüggés van az iteráció és a szélesség között, tehát az iteráció az x tengelyen való mozgást követi

ezért én így írtam meg a kódot:

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(0, ch/2);
for (var i=0; i<=cw;ctx.stroke(), i+=3, ctx.moveTo(counter, centerLine)){
if (i% 2 === 0){

ctx.lineTo(cw/2, 0);

}
else{

ctx.lineTo(cw/2, ch);

}
}

persze kegészítheted, hogy én is tettem, hogy nem használtam számokat cikluson belül, illetve az indexet a ciklus előtt létrehoztam, és a kezdő mozgást is arra hivatkozva végeztem el

https://jsbin.com/gepirak/8/edit?html,js

...