Rysowanie na Canvas - tło wyświetla się, a inne rzeczy na nim już nie

0

Witam, dopiero co uczę się programowania więc proszę o wyrozumiałość. Mam problem z rysowaniem w canvasie. Dokładniej chodzi o to, że wyświetlanie tła działa dobrze, natomiast jak chce coś narysować na tym tle to nic się nie pojawia, ktoś ma pomysł co robię nie tak? Będę bardzo wdzięczny za pomoc. Chodzi o metodę rysuj(). Link do jsfiddle http://jsfiddle.net/ae3nj03a/

start.wyswietl = (function(){
    var dom = start.dom,
        $ = dom.$,
        gracz = start.gracz,
        canvas, ctx, 
        pUruchomienie = true;
        
    function createBackground(){
        var background = document.createElement("canvas");
        bgctx = background.getContext("2d");
        dom.dodKlase(background, "background");
        //background.width = 640;
        //background.height = 480;
        background = new Image();
        background.onload = function(){
            bgctx.drawImage(background, 0, 0);
            
        };
        background.src = "../obrazki/tapeta.jpg";
    
        dom.dodKlase(background, "board-bg");
        return background;
    }
    
    function rysuj(callback){
        var gracz = document.createElement("canvas");
        gctx = gracz.getContext("2d");
        gctx.fillRect(25,25,100,100);
         /*gradient = gctx.createRadialGradient(300,300, 5, 100,100,150);
            gradient.addColorStop(0,"black");
            gradient.addColorStop(1, "red");
            gctx.fillStyle = gradient;
            gctx.fillRect(10,10,150,50);
            gctx.beginPath();
            gctx.stroke();
 */       
        callback();
    }
     
     //function ()

    function setup(){
        var boardElement = $("#ekran-gry .ekran-planszy")[0];
        canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        dom.dodKlase(canvas, "plansza");
        boardElement.appendChild(createBackground());
        boardElement.appendChild(canvas);
       // rysuj();    


       
    }
    
    function init(callback){
        if (pUruchomienie){
            setup();
            pUruchomienie = false;
        }
           callback(); 
    }
    return{
        init : init,
        rysuj : rysuj
    };

})();
0

wstaw to na jsfiddle.net czy podobny serwis, a w postach wstawiaj znaczniki koloryzujące składnie...

0
        var gracz = document.createElement("canvas");
        gctx = gracz.getContext("2d");
        gctx.fillRect(25,25,100,100);

Tworzysz element, a następnie nie dodajesz go do drzewka DOM (co robisz w innych miejscach, np. w boardElement.appendChild(createBackground())).

0

Z tego co rozumiem powinienem dodać te linijki.

 dom.dodKlase(gracz, "background");
 */     return gracz;
        dom.dodKlase(gracz, "board-bg");

oraz

boardElement.appendChild(rysuj());

Zrobiłem tak i działa, mam kolejne pytanie. Staram się stworzyć grę i czy dla każdego nowego rysunku muszę mieć osobny styl css? Przykładowo dla obrazku gracza czy przeciwnika. Czy można wyświetlać bez pomocy modułu DOM? i Jeszcze 1 problem powstał. Nie wiem o co chodzi ale coś się stało z osią x,y. Próbują narysować koło, obrazek co dziwne nie robi się okrągły a punkt 0x zaczyna się na środku ekranu. Oś y zamiast posiada mniejszą wartość niż zamierzane 480px. Zupełnie się pogubiłem. Jeżeli ktoś mógłby pomóc bardzo byłbym wdzięczny. Metoda tworząca koło wygląda tak:

 function rysuj(callback){
        var gracz = document.createElement("canvas");
        gctx = gracz.getContext("2d");
        gctx.fillStyle = "black";
        gctx.arc(5, 120, 5, 0, 2*Math.PI);
        gctx.fill();
      //  dom.dodKlase(gracz, "plansza");
        dom.dodKlase(gracz, "gracze");
        return gracz;
        callback();
    }

a to jest wynik operacji:

wce0k8.png

dodanie obrazka do załączników i treści posta - @furious programming

Po długich męczarniach poprawione. Pomogło określenie podczas rysowania width i height. Dlaczego mi nie wczytało tych danych z pliku css, będę wdzięczny za odp.

1 użytkowników online, w tym zalogowanych: 0, gości: 1