mozilla
Wyniki wyszukiwania

    Rysowanie grafik za pomocą Canvas

    UWAGA: Tłumaczenie tej strony nie zostało zakończone.
    Może być ona niekompletna lub wymagać korekty.
    Chcesz pomóc? | Dokończ tłumaczenie | Sprawdź ortografię | Więcej takich stron+.

    Wprowadzenie

    Od wersji Firefoksa 1.5, Firefox zawiera nowy element HTML dla programowalnej grafiki - <canvas> oparty na specyfikacji: WHATWG canvas specification, która bazuje na specyfikacji <canvas> Apple'a wprowadzonej w Safari. Może być użyty dla wyświetlania grafik, elementów interfejsu użytkownika, i innych grafik tworzonych po stronie klienta.

    Element <canvas> tworzy powierzchnię do rysowania o stałej wielkości. Strona można obsługiwać wiele takich kontekstów. Tutaj skupimy się tylko na kontekście w trybie 2D. Oprócz niego istnieje jeszcze kontekst oparty na OpenGL ES, a jest to kontekst WebGL.

    Kontekt do renderowania 2D

    Prosty przykład

    Rozpoczniemy od prostego przykładu w którym narysujemy dwa przecinające się prostokąty , z których jeden posiada przezroczystość alpha:

    Przykład 1.

    <html>
     <head>
      <script type="application/x-javascript">
       function draw() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        
        // wybierz odpowiedni kolor
        ctx.fillStyle = "rgb(200,0,0)";
        // wypełnij dany obszar
        ctx.fillRect (10, 10, 50, 50);
    
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 50, 50);
       }
      </script>
     </head>
     <body onload="draw()">
      <canvas id="canvas" width="300" height="300"></canvas>
     </body>
    </html>
    

    Funkcja draw pobiera znacznik canvas ze strony i uzyskuje graficzny kontekst 2D tego elementu. Zmienna ctx posłuży nam do dalszego renderowania. Przykład po prostu wypełnia dwa prostokąty, używając własności wypełnienia fillStyle dla dwóch różnych kolorów ze specyfikacji CSS i wywołując funkcję fillRect. Drugie wypełnienie używa wartości rgba() aby wraz z kolorem określić wartość przezroczystości alpha .

    Funkcja fillRect, strokeRect, i clearRect wywołuje rysowanie wypełnienia, konturu, lub wyczyszczenie prostokata. Żeby rysować bardziej skomplikowane kształty, są używane ścieżki.

    Zastosowanie ścieżek

    Funkcja beginPathtworzy nową ścieżkę, i za pomocą moveTo, lineTo, arcTo, arc oraz podobnych metod dodajemy do niej kolejne segmenty owej ścieżki. Ścieżkę kończymy używając funkcji closePath. Jeśli tylko scieżka zostanie utworzona, możemy użyć fill lub stroke do odtworzenia ścieżki dla elementu canvas .

    Przykład 2.

    <html>
     <head>
      <script type="application/x-javascript">
       function draw() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
    
        ctx.fillStyle = "red";
    
        ctx.beginPath();
        ctx.moveTo(30, 30);
        ctx.lineTo(150, 150);
        ctx.quadraticCurveTo(60, 70, 70, 150);
        ctx.lineTo(30, 30);
        ctx.fill();
       }
      </script>
     </head>
     <body onload="draw()">
       <canvas id="canvas" width="300" height="300"></canvas>
     </body>
    </html>
    

    Wywoływanie fill() lub stroke() powoduje użycie obecnej ścieżki. By ponownie narysować śćieżkę należy utworzyć nową.

    Graphics state

    Atrybuty kontekstu canvas takie jak fillStyle, strokeStyle, lineWidth, czy lineJoin są częścią tzw. graphics state (z ang. stan grafiki). Kontekt udostępnia dwie metody, a mianowicie save() i restore(), które pozwalają manipulować stanem, dokładniej to utworzyć nowy, popracować na nim, a potem przywrócić poprzedni.

    Bardziej skomplikowany przykład

    Tutaj akurat mamy bardziej skomplikowany przykład używający ścieżek, maszyny stanów (save(), restore()) oraz wprowadzający aktualną macierz przekształceń. Metody kontekstu takie jak translate(), scale() czy rotate() zmieniają aktualną macierz. Wszystkie wyświetlane punkty są najpierw przekształcane właśnie przez nią.

    Przykład 3.

     <html>
      <head>
       <script type="application/x-javascript">
     function drawBowtie(ctx, fillStyle) {
     
       ctx.fillStyle = "rgba(200,200,200,0.3)";
       ctx.fillRect(-30, -30, 60, 60);
     
       ctx.fillStyle = fillStyle;
       ctx.globalAlpha = 1.0;
       ctx.beginPath();
       ctx.moveTo(25, 25);
       ctx.lineTo(-25, -25);
       ctx.lineTo(25, -25);
       ctx.lineTo(-25, 25);
       ctx.closePath();
       ctx.fill();
     }
     
     function dot(ctx) {
       ctx.save();
       ctx.fillStyle = "black";
       ctx.fillRect(-2, -2, 4, 4);
       ctx.restore();
     }
     
     function draw() {
       var canvas = document.getElementById("canvas");
       var ctx = canvas.getContext("2d");
    
       // note that all other translates are relative to this
       // one
       ctx.translate(45, 45);
    
       ctx.save();
       //ctx.translate(0, 0); // unnecessary
       drawBowtie(ctx, "red");
       dot(ctx);
       ctx.restore();
     
       ctx.save();
       ctx.translate(85, 0);
       ctx.rotate(45 * Math.PI / 180);
       drawBowtie(ctx, "green");
       dot(ctx);
       ctx.restore();
     
       ctx.save();
       ctx.translate(0, 85);
       ctx.rotate(135 * Math.PI / 180);
       drawBowtie(ctx, "blue");
       dot(ctx);
       ctx.restore();
     
       ctx.save();
       ctx.translate(85, 85);
       ctx.rotate(90 * Math.PI / 180);
       drawBowtie(ctx, "yellow");
       dot(ctx);
       ctx.restore();
     }
        </script>
      </head>
      <body onload="draw()">
        <canvas id="canvas" width="300" height="300"></canvas>
      </body>
     </html>
    

    This defines two methods, drawBowtie and dot, that are called 4 times. Before each call, translate() and rotate() are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. dot renders a small black square centered at (0, 0). That dot is moved around by the transformation matrix. drawBowtie renders a simple bowtie path using the passed-in fill style.

    As matrix operations are cumulative, save() and restore() are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a translate() rotate() translate() sequence will yield different results than a translate() translate() rotate() series of calls.

    Compatibility With Apple <canvas>

    For the most part, <canvas> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.

    Żądany znacznik </canvas>

    In the Apple Safari implementation, <canvas> is an element implemented in much the same way <img> is; it does not have an end tag. However, for <canvas> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a required end tag.

    If fallback content is not needed, a simple <canvas id="foo" ...></canvas> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

    If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content). Todo: get hixie to put the CSS bits in

    Dodatkowe możliwości

    Rysowanie strony w elemencie canvas

    Ta możliwość jest dodatkowa i wspierana tylko przez Google Chrome i pochodne. Nie jest to dozwolona w normalnych stronach internetowych

    Obiekt canvas w Firefox jest rozszerzony o metodę drawWindow. Pozwala narysować zrzut aktualnej treści strony. Przykładowo,

    ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
    

    narysuje zawartość strony, w prostokącie (0,0,100,200) relatywnym do górnego-lewego rogu, na białym tle, do obiektu canvas. Ustawiając "rgba(255,255,255,0)" jako kolor, nasza strona zostanie narysowana na przezroczystym tle (co jest dużo wolniejsze).

    With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.

    Ted Mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.

    Zobacz także

    Autorzy i etykiety dokumentu

    Contributors to this page: Ptak82, Mgjbot, Internauta1024A, Taw, Rokuzo
    Ostatnia aktualizacja: Rokuzo,