Rysowanie rectfill i odejmowanie wartości x Opcje

[soliniak]

Mam taki kod i proszę o wyjaśnienie czemu pozioma belka powiększa się bez problemu ale gdy "cx" osiągnie 100 to nie zaczyna się ona zmniejszać?

[JAVASCRIPT] pobierz, plaintext 
function draw(){
  an();
  doMove();
}
 
 
function an(){
    c = document.getElementById("myCanvas");
    c.width = Math.max(window.innerWidth, document.body.clientWidth) - 10;
    c.height = Math.max(window.innerHeight, document.body.clientHeight) - 800;
 
    d = document.getElementById("test");
    e = document.getElementById("test2");  
    ctx = c.getContext("2d");
    ctx.fillStyle = "blue";
 
    x = 30;
    y = 80;
    cx = 0;
    cy = 15;
    tab = 100;
    cz = false;
 
this.doMove = function(){
  if(cz == true){
       cx -= 1;
       setTimeout(doMove,20); 
       if (cx == 0) cz = false;
 
   }else if(cz == false) {
       cx += 1;
       setTimeout(doMove,20);       
       if(cx == tab) cz = true;
 
   }
    //e.innerHTML = cx;  
    ctx.fillRect(x, y, cx, cy); 
    d.innerHTML= "x: " + cx + "<br /> y: " + cy;
 
  }
}
 
draw();
[JAVASCRIPT] pobierz, plaintext 

[trueblue]

A dlaczego miałby się zmniejszać skoro zamazałeś część canvas prostokątem o szerokości 100px?

[soliniak]

No i chcę żeby ten prostokąt z powrotem wrócił do swoich wymiarów, a potem znowu powiększył i znowu zmniejszył itd.
Tutaj kod: https://jsfiddle.net/krhskvey/

Ten post edytował soliniak 8.11.2016, 15:48:25

[trueblue]

Jeśli rysujesz mazakiem na kartce szeroką kreskę i potem wracasz po niej, to poprzednia się czyści?

[soliniak]

No i ślicznie dziękuję za podpowiedź chociaż nie wiedziałem o metodzie clearRect i trochę mi to zajęło
Temat do zamknięcia

Podrzucam rozwiązanie

[JAVASCRIPT] pobierz, plaintext 
function draw(){
  an();
  doMove();
}
 
 
function an(){
    c = document.getElementById("myCanvas");
    c.width = Math.max(window.innerWidth, document.body.clientWidth) - 10;
    c.height = Math.max(window.innerHeight, document.body.clientHeight) - 800;
 
    d = document.getElementById("test");
    e = document.getElementById("test2");  
    ctx = c.getContext("2d");
    ctx.fillStyle = "blue";
 
    x = 330;
    y = 80;
    cx = 10;
    cx2 = 0;
    cy = 15;
    tab = 100;
    cz = false;
 
this.doMove = function(){
  if(cz == true){    
       --cx;
       --cx2;
       if(cx2 <= -tab){
       cx2 = 0;
    }
       ctx.clearRect(x+tab, y, cx2, cy);
       setTimeout(doMove,20); 
       if (cx == 0) cz = false;
 
   }else if(cz == false) {
       cx++;
       ctx.fillRect(x, y, cx, cy); 
       setTimeout(doMove,20);       
       if(cx >= tab) cz = true;
   }
    //e.innerHTML = cx2;  
      d.innerHTML= "x: " + cx + "<br /> y: " + cy + "<br />cx: " +cx2;
  }  
}
 
draw();
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował soliniak 8.11.2016, 16:16:19