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

2015-02-24 10:45
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
    };

})();
edytowany 5x, ostatnio: Latynos, 2015-02-24 11:13

Pozostało 580 znaków

2015-02-24 11:09
0

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


((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);

Pozostało 580 znaków

2015-02-24 12:49
ŁF
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())).


edytowany 1x, ostatnio: ŁF, 2015-02-24 12:49

Pozostało 580 znaków

2015-02-24 13:21
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.

edytowany 6x, ostatnio: Latynos, 2015-02-24 18:17
Obrazki dodawaj do załączników postów, nie na zewnętrzne hostingi; - furious programming 2015-02-24 17:50

Pozostało 580 znaków

Liczba odpowiedzi na stronę

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