Porównywanie wersji

Rysowanie grafik za pomocą Canvas

Change Revisions

Wersja 272717:

Sprawdzenie wersji 272717 wykonane przez Internauta1024A

Wersja 272718:

Sprawdzenie wersji 272718 wykonane przez Taw

Tytuł:
Rysowanie grafik za pomocą Canvas
Rysowanie grafik za pomocą Canvas
Ciąg znaków:
Rysowanie_grafik_za_pomocą_Canvas
Rysowanie_grafik_za_pomocą_Canvas
Etykiety:
HTML, HTML:Canvas, Wszystkie_kategorie, Strony_wymagające_dopracowania
HTML, HTML:Canvas, Wszystkie_kategorie, Strony_wymagające_dopracowania
Treść:

Revision 272717
Revision 272718
n10    <h3 name="Wprowadzenie">n10    <h3 id="Wprowadzenie" name="Wprowadzenie">
n14      Od wersji <a href="pl/Firefox_1.5">Firefoksa 1.5</a>, Firefn14      Od wersji <a href="/pl/Firefox_1.5_dla_programist%C3%B3w" t
>ox zawiera nowy element HTML dla programowalnej grafiki - <code>&>itle="pl/Firefox_1.5_dla_programistów">Firefoksa 1.5</a>, Firefox
>lt;canvas&gt;</code> oparty na specyfikacji: <a class="external" > zawiera nowy element HTML dla programowalnej grafiki - <code>&lt
>href="http://www.whatwg.org/specs/web-apps/current-work/#scs-dyna>;canvas&gt;</code> oparty na specyfikacji: <a class="external" hr
>mic">WHATWG canvas specification</a>, która bazuje na specyfikacj>ef="http://www.whatwg.org/specs/web-apps/current-work/#scs-dynami
>i <code>&lt;canvas&gt;</code> Apple'a wprowadzonej w Safari. Może>c">WHATWG canvas specification</a>, która bazuje na specyfikacji 
> być użyty dla wyświetlania grafik, elementów interfejsu użytkown><code>&lt;canvas&gt;</code> Apple'a wprowadzonej w Safari. Może b
>ika, i innych grafik tworzonych po stronie klienta.>yć użyty dla wyświetlania grafik, elementów interfejsu użytkownik
 >a, i innych grafik tworzonych po stronie klienta.
15    </p>
16    <p>15    </p>
16    <p>
17      Element <code>&lt;canvas&gt;</code> tworzy powierzchnię do 17      Element <code>&lt;canvas&gt;</code> tworzy powierzchnię do 
>rysowania o stałej wielkości that exposes one or more <i>renderin>rysowania o stałej wielkości that exposes one or more <em>renderi
>g contexts</i>. We'll focus on the 2D rendering context (incident>ng contexts</em>. We'll focus on the 2D rendering context (incide
>ally, the only currently defined rendering context). In the futur>ntally, the only currently defined rendering context). In the fut
>e, other contexts may provide different types of rendering; for e>ure, other contexts may provide different types of rendering; for
>xample, it is likely that a 3D context based on OpenGL ES will ev> example, it is likely that a 3D context based on OpenGL ES will 
>entually be added to the <code>&lt;canvas&gt;</code> specificatio>eventually be added to the <code>&lt;canvas&gt;</code> specificat
>n.>ion.
n19    <h3 name="The_2D_Rendering_Context">n19    <h3 id="The_2D_Rendering_Context" name="The_2D_Rendering_Cont
 >ext">
n22    <h4 name="Prosty_przyk.C5.82ad">n22    <h4 id="Prosty_przyk.C5.82ad" name="Prosty_przyk.C5.82ad">
n29      <img align="right" alt="Przykład 1." fileid="2408" src="Filn29      <img align="right" alt="Przykład 1." class=" internal" src=
>e:pl/Media_Gallery/Canvas_ex1.png">>"/@api/deki/files/2408/=Canvas_ex1.png">
n58    <h4 name="Zastosowanie_.C5.9Bcie.C5.BCek">n58    <h4 id="Zastosowanie_.C5.9Bcie.C5.BCek" name="Zastosowanie_.C
 >5.9Bcie.C5.BCek">
n65      <img align="right" alt="Przykład 2." fileid="2409" src="Filn65      <img align="right" alt="Przykład 2." class=" internal" src=
>e:pl/Media_Gallery/Canvas_ex2.png">>"/@api/deki/files/2409/=Canvas_ex2.png">
n94    <h4 name="Graphics_State">n94    <h4 id="Graphics_State" name="Graphics_State">
n98      Attributes of the context such as <code>fillStyle</code>, <n98      Attributes of the context such as <code>fillStyle</code>, <
>code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJo>code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJo
>in</code> are part of the current <i>graphics state</i>. The cont>in</code> are part of the current <em>graphics state</em>. The co
>ext provides two methods, <code>save()</code> and <code>restore()>ntext provides two methods, <code>save()</code> and <code>restore
></code>, that can be used to move the current state to and from t>()</code>, that can be used to move the current state to and from
>he state stack.> the state stack.
n100    <h4 name="Bardziej_skomplikowany_przyk.C5.82ad">n100    <h4 id="Bardziej_skomplikowany_przyk.C5.82ad" name="Bardziej_
 >skomplikowany_przyk.C5.82ad">
n107      <img align="right" alt="Przykład 3." fileid="2410" src="Filn107      <img align="right" alt="Przykład 3." class=" internal" src=
>e:pl/Media_Gallery/Canvas_ex3.png">>"/@api/deki/files/2410/=Canvas_ex3.png">
n184    <h3 name="Compatibility_With_Apple_.3Ccanvas.3E">n184    <h3 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatib
 >ility_With_Apple_.3Ccanvas.3E">
n190    <h4 name=".C5.BB.C4.85dany_znacznik_.3C.2Fcanvas.3E">n190    <h4 id=".C5.BB.C4.85dany_znacznik_.3C.2Fcanvas.3E" name=".C5.
 >BB.C4.85dany_znacznik_.3C.2Fcanvas.3E">
n194      In the Apple Safari implementation, <code>&lt;canvas&gt;</cn194      In the Apple Safari implementation, <code>&lt;canvas&gt;</c
>ode> is an element implemented in much the same way <code>&lt;img>ode> is an element implemented in much the same way <code>&lt;img
>&gt;</code> is; it does not have an end tag. However, for <code>&>&gt;</code> is; it does not have an end tag. However, for <code>&
>lt;canvas&gt;</code> to have widespread use on the web, some faci>lt;canvas&gt;</code> to have widespread use on the web, some faci
>lity for fallback content must be provided. Therefore, Mozilla's >lity for fallback content must be provided. Therefore, Mozilla's 
>implementation has a <i>required</i> end tag.>implementation has a <em>required</em> end tag.
n200      If fallback content is desired, some CSS tricks must be empn200      If fallback content is desired, some CSS tricks must be emp
>loyed to mask the fallback content from Safari (which should rend>loyed to mask the fallback content from Safari (which should rend
>er just the canvas), and also to mask the CSS tricks themselves f>er just the canvas), and also to mask the CSS tricks themselves f
>rom IE (which should render the fallback content). <b>Todo: get h>rom IE (which should render the fallback content). <strong>Todo: 
>ixie to put the CSS bits in</b>>get hixie to put the CSS bits in</strong>
n202    <h3 name="Dodatkowe_mo.C5.BCliwo.C5.9Bci">n202    <h3 id="Dodatkowe_mo.C5.BCliwo.C5.9Bci" name="Dodatkowe_mo.C5
 >.BCliwo.C5.9Bci">
n205    <h4 name="Rendering_Web_Content_Into_A_Canvas">n205    <h4 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_
 >Web_Content_Into_A_Canvas">
n215ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)");n215ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
n218      would draw the contents of the current window, in the rectan218      would draw the contents of the current window, in the recta
>ngle (0,0,100,200) in pixels relative to the top-left of the view>ngle (0,0,100,200) in pixels relative to the top-left of the view
>port, on a black background, into the canvas. By specifying "rgba>port, on a white background, into the canvas. By specifying "rgba
>(0,0,0,0)" as the color, the contents would be drawn with a trans>(255,255,255,0)" as the color, the contents would be drawn with a
>parent background (which would be slower).> transparent background (which would be slower).
n226    <h3 name="Zobacz_tak.C5.BCe">n226    <h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">
n231        <a href="pl/Przewodnik_po_canvas">Przewodnik po canvas</an231        <a href="/pl/Przewodnik_po_canvas" title="pl/Przewodnik_p
>>>o_canvas">Przewodnik po canvas</a>
n242      <li>Inne <a href="Special:Tags?tag=Przyk%C5%82ady_Canvas&amn242      <li>Inne <a href="/Special:Tags?tag=Przyk%C5%82ady_Canvas&a
>p;language=pl">przykłady</a>:>mp;language=pl" title="Special:Tags?tag=Przykłady_Canvas&amp;lang
 >uage=pl">przykłady</a>:
n245            <a href="pl/Prosty_RayCaster">Prosty RayCaster</a>n245            <a href="/pl/Prosty_RayCaster" title="pl/Prosty_RayCa
 >ster">Prosty RayCaster</a>
t256        <a href="Special:Tags?tag=HTML:Canvas&amp;language=pl">I t256        <a href="/Special:Tags?tag=HTML:Canvas&amp;language=pl" t
>więcej...</a>>itle="Special:Tags?tag=HTML:Canvas&amp;language=pl">I więcej...</
 >a>
257      </li>
257      </li>258    </ul>
259    <p>
258    </ul>{{ languages( { "en": "en/Drawing_Graphics_with_Canvas",260      {{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "f
> "fr": "fr/Dessiner_avec_canvas", "ja": "ja/Drawing_Graphics_with>r": "fr/Dessiner_avec_canvas", "ja": "ja/Drawing_Graphics_with_Ca
>_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas" } ) }}>nvas", "ko": "ko/Drawing_Graphics_with_Canvas" } ) }}
261    </p>

Wróć do historii