Porównywanie wersji

Rysowanie grafik za pomocą Canvas

Wersja 272718:

Sprawdzenie wersji 272718 wykonane przez Taw

Wersja 211883:

Sprawdzenie wersji 211883 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
Treść:

Wersja 272718
Wersja 211883
t7    <p>t
8      {{ Dopracuj() }}
9    </p>
10    <h3 id="Wprowadzenie" name="Wprowadzenie">
11      Wprowadzenie
12    </h3>
13    <p>
14      Od wersji <a href="/pl/Firefox_1.5_dla_programist%C3%B3w" t
>itle="pl/Firefox_1.5_dla_programistów">Firefoksa 1.5</a>, Firefox 
> zawiera nowy element HTML dla programowalnej grafiki - <code>&lt 
>;canvas&gt;</code> oparty na specyfikacji: <a class="external" hr 
>ef="http://www.whatwg.org/specs/web-apps/current-work/#scs-dynami 
>c">WHATWG canvas specification</a>, która bazuje na specyfikacji  
><code>&lt;canvas&gt;</code> Apple'a wprowadzonej w Safari. Może b 
>yć użyty dla wyświetlania grafik, elementów interfejsu użytkownik 
>a, i innych grafik tworzonych po stronie klienta. 
15    </p>
16    <p>
17      Element <code>&lt;canvas&gt;</code> tworzy powierzchnię do 
>rysowania o stałej wielkości that exposes one or more <em>renderi 
>ng contexts</em>. We'll focus on the 2D rendering context (incide 
>ntally, the only currently defined rendering context). In the fut 
>ure, other contexts may provide different types of rendering; for 
> example, it is likely that a 3D context based on OpenGL ES will  
>eventually be added to the <code>&lt;canvas&gt;</code> specificat 
>ion. 
18    </p>
19    <h3 id="The_2D_Rendering_Context" name="The_2D_Rendering_Cont
>ext"> 
20      The 2D Rendering Context
21    </h3>
22    <h4 id="Prosty_przyk.C5.82ad" name="Prosty_przyk.C5.82ad">
23      Prosty przykład
24    </h4>
25    <p>
26      Rozpoczniemy od prostego przykładu w którym narysujemy dwa 
>przecinające się prostokąty , z których jeden posiada przezroczys 
>tość alpha: 
27    </p>
28    <p>
29      <img align="right" alt="Przykład 1." class=" internal" src=
>"/@api/deki/files/2408/=Canvas_ex1.png"> 
30    </p>
31    <pre class="eval">
32&lt;html&gt;
33 &lt;head&gt;
34  &lt;script type="application/x-javascript"&gt;
35function draw() {
36 var canvas = document.getElementById("canvas");
37 var ctx = canvas.getContext("2d");
38 
39 ctx.fillStyle = "rgb(200,0,0)";
40 ctx.fillRect (10, 10, 50, 50);
41 
42 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
43 ctx.fillRect (30, 30, 50, 50);
44}
45  &lt;/script&gt;
46 &lt;/head&gt;
47 &lt;body onload="draw()"&gt;
48   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas
>&gt; 
49 &lt;/body&gt;
50&lt;/html&gt;
51</pre>
52    <p>
53      Funkcja <code>draw</code> gets the <code>canvas</code> elem
>ent, then obtains the <code>2d</code> context. The <code>ctx</cod 
>e> object can then be used to actually render to the canvas. Przy 
>kład po prostu wypełnia dwa prostokąty ,używając własności wypełn 
>ienia <code>fillStyle</code> dla dwóch różnych kolorów ze specyfi 
>kacji CSS i wywołując funkcję <code>fillRect</code>. Drugie wypeł 
>nienie używa wartości <code>rgba()</code>aby wraz z kolorem okreś 
>lić wartość przezroczystości alpha . 
54    </p>
55    <p>
56      Funkcja <code>fillRect</code>, <code>strokeRect</code>, i <
>code>clearRect</code> wywołuje rysowanie wypełnienia, konturu, lu 
>b wyczyszczenie prostokata. Żeby rysować bardziej skomplikowane k 
>ształty, są używane ścieżki. 
57    </p>
58    <h4 id="Zastosowanie_.C5.9Bcie.C5.BCek" name="Zastosowanie_.C
>5.9Bcie.C5.BCek"> 
59      Zastosowanie ścieżek
60    </h4>
61    <p>
62      Funkcja <code>beginPath</code>tworzy nową ścieżkę, i za pom
>ocą <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, 
> <code>arc</code>, oraz podobnych metod dodajemy do niej kolejne  
>segmenty owej ścieżki. Ścieżkę kończymy używając funkcji <code>cl 
>osePath</code>. Jeśli tylko scieżka zostanie utworzona, możemy uż 
>yć <code>fill</code> lub <code>stroke</code> do odtworzenia ścież 
>ki dla elementu canvas . 
63    </p>
64    <p>
65      <img align="right" alt="Przykład 2." class=" internal" src=
>"/@api/deki/files/2409/=Canvas_ex2.png"> 
66    </p>
67    <pre class="eval">
68&lt;html&gt;
69 &lt;head&gt;
70  &lt;script type="application/x-javascript"&gt;
71function draw() {
72  var canvas = document.getElementById("canvas");
73  var ctx = canvas.getContext("2d");
74 
75  ctx.fillStyle = "red";
76 
77  ctx.beginPath();
78  ctx.moveTo(30, 30);
79  ctx.lineTo(150, 150);
80  ctx.quadraticCurveTo(60, 70, 70, 150);
81  ctx.lineTo(30, 30);
82  ctx.fill();
83}
84   &lt;/script&gt;
85 &lt;/head&gt;
86 &lt;body onload="draw()"&gt;
87   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas
>&gt; 
88 &lt;/body&gt;
89&lt;/html&gt;
90</pre>
91    <p>
92      Calling <code>fill()</code> lub <code>stroke()</code> cause
>s the current path to be used. To be filled or stroked again, the 
> path must be recreated. 
93    </p>
94    <h4 id="Graphics_State" name="Graphics_State">
95      Graphics State
96    </h4>
97    <p>
98      Attributes of the context such as <code>fillStyle</code>, <
>code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJo 
>in</code> are part of the current <em>graphics state</em>. The co 
>ntext provides two methods, <code>save()</code> and <code>restore 
>()</code>, that can be used to move the current state to and from 
> the state stack. 
99    </p>
100    <h4 id="Bardziej_skomplikowany_przyk.C5.82ad" name="Bardziej_
>skomplikowany_przyk.C5.82ad"> 
101      Bardziej skomplikowany przykład
102    </h4>
103    <p>
104      Here's a little more complicated example, that uses paths, 
>state, and also introduces the current transformation matrix. The 
> context methods <code>translate()</code>, <code>scale()</code>,  
>and <code>rotate()</code> all transform the current matrix. All r 
>endered points are first transformed by this matrix. 
105    </p>
106    <p>
107      <img align="right" alt="Przykład 3." class=" internal" src=
>"/@api/deki/files/2410/=Canvas_ex3.png"> 
108    </p>
109    <pre>
110 &lt;html&gt;
111  &lt;head&gt;
112   &lt;script type="application/x-javascript"&gt;
113 function drawBowtie(ctx, fillStyle) {
114 
115   ctx.fillStyle = "rgba(200,200,200,0.3)";
116   ctx.fillRect(-30, -30, 60, 60);
117 
118   ctx.fillStyle = fillStyle;
119   ctx.globalAlpha = 1.0;
120   ctx.beginPath();
121   ctx.moveTo(25, 25);
122   ctx.lineTo(-25, -25);
123   ctx.lineTo(25, -25);
124   ctx.lineTo(-25, 25);
125   ctx.closePath();
126   ctx.fill();
127 }
128 
129 function dot(ctx) {
130   ctx.save();
131   ctx.fillStyle = "black";
132   ctx.fillRect(-2, -2, 4, 4);
133   ctx.restore();
134 }
135 
136 function draw() {
137   var canvas = document.getElementById("canvas");
138   var ctx = canvas.getContext("2d");
139 
140   // note that all other translates are relative to this
141   // one
142   ctx.translate(45, 45);
143 
144   ctx.save();
145   //ctx.translate(0, 0); // unnecessary
146   drawBowtie(ctx, "red");
147   dot(ctx);
148   ctx.restore();
149 
150   ctx.save();
151   ctx.translate(85, 0);
152   ctx.rotate(45 * Math.PI / 180);
153   drawBowtie(ctx, "green");
154   dot(ctx);
155   ctx.restore();
156 
157   ctx.save();
158   ctx.translate(0, 85);
159   ctx.rotate(135 * Math.PI / 180);
160   drawBowtie(ctx, "blue");
161   dot(ctx);
162   ctx.restore();
163 
164   ctx.save();
165   ctx.translate(85, 85);
166   ctx.rotate(90 * Math.PI / 180);
167   drawBowtie(ctx, "yellow");
168   dot(ctx);
169   ctx.restore();
170 }
171    &lt;/script&gt;
172  &lt;/head&gt;
173  &lt;body onload="draw()"&gt;
174    &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canva
>s&gt; 
175  &lt;/body&gt;
176 &lt;/html&gt;
177</pre>
178    <p>
179      This defines two methods, <code>drawBowtie</code> and <code
>>dot</code>, that are called 4 times. Before each call, <code>tra 
>nslate()</code> and <code>rotate()</code> are used to set up the  
>current transformation matrix, which in turn positions the dot an 
>d the bowtie. <code>dot</code> renders a small black square cente 
>red at <code>(0, 0)</code>. That dot is moved around by the trans 
>formation matrix. <code>drawBowtie</code> renders a simple bowtie 
> path using the passed-in fill style. 
180    </p>
181    <p>
182      As matrix operations are cumulative, <code>save()</code> an
>d <code>restore()</code> are used around each set of calls to res 
>tore the original canvas state. One thing to watch out for is tha 
>t rotation always occurs around the current origin; thus a <code> 
>translate() rotate() translate()</code> sequence will yield diffe 
>rent results than a <code>translate() translate() rotate()</code> 
> series of calls. 
183    </p>
184    <h3 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatib
>ility_With_Apple_.3Ccanvas.3E"> 
185      Compatibility With Apple &lt;canvas&gt;
186    </h3>
187    <p>
188      For the most part, <code>&lt;canvas&gt;</code> is compatibl
>e with Apple's and other implementations. There are, however, a f 
>ew issues to be aware of, described here. 
189    </p>
190    <h4 id=".C5.BB.C4.85dany_znacznik_.3C.2Fcanvas.3E" name=".C5.
>BB.C4.85dany_znacznik_.3C.2Fcanvas.3E"> 
191      Żądany znacznik <code>&lt;/canvas&gt;</code>
192    </h4>
193    <p>
194      In the Apple Safari implementation, <code>&lt;canvas&gt;</c
>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>& 
>lt;canvas&gt;</code> to have widespread use on the web, some faci 
>lity for fallback content must be provided. Therefore, Mozilla's  
>implementation has a <em>required</em> end tag. 
195    </p>
196    <p>
197      If fallback content is not needed, a simple <code>&lt;canva
>s id="foo" ...&gt;&lt;/canvas&gt;</code> will be fully compatible 
> with both Safari and Mozilla -- Safari will simply ignore the en 
>d tag. 
198    </p>
199    <p>
200      If fallback content is desired, some CSS tricks must be emp
>loyed to mask the fallback content from Safari (which should rend 
>er just the canvas), and also to mask the CSS tricks themselves f 
>rom IE (which should render the fallback content). <strong>Todo:  
>get hixie to put the CSS bits in</strong> 
201    </p>
202    <h3 id="Dodatkowe_mo.C5.BCliwo.C5.9Bci" name="Dodatkowe_mo.C5
>.BCliwo.C5.9Bci"> 
203      Dodatkowe możliwości
204    </h3>
205    <h4 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_
>Web_Content_Into_A_Canvas"> 
206      Rendering Web Content Into A Canvas
207    </h4>
208    <div class="note">
209      This feature is only available for code running with Chrome
> privileges. It is not allowed in normal HTML pages. 
210    </div>
211    <p>
212      Mozilla's <code>canvas</code> is extended with the <code>dr
>awWindow</code> method. This method draws a snapshot of the conte 
>nts of a DOM <code>window</code> into the canvas. For example, 
213    </p>
214    <pre class="eval">
215ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
216</pre>
217    <p>
218      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 
>port, on a white background, into the canvas. By specifying "rgba 
>(255,255,255,0)" as the color, the contents would be drawn with a 
> transparent background (which would be slower). 
219    </p>
220    <p>
221      With this method, it is possible to fill a hidden IFRAME wi
>th arbitrary content (e.g., CSS-styled HTML text, or SVG) and dra 
>w it into a canvas. It will be scaled, rotated and so on accordin 
>g to the current transformation. 
222    </p>
223    <p>
224      Ted Mielczarek's <a class="external" href="http://ted.mielc
>zarek.org/code/mozilla/tabpreview/">tab preview</a> extension use 
>s this technique in chrome to provide thumbnails of web pages, an 
>d the source is available for reference. 
225    </p>
226    <h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">
227      Zobacz także
228    </h3>
229    <ul>
230      <li>
231        <a href="/pl/Przewodnik_po_canvas" title="pl/Przewodnik_p
>o_canvas">Przewodnik po canvas</a> 
232      </li>
233      <li>
234        <a class="external" href="http://www.whatwg.org/specs/web
>-apps/current-work/#scs-dynamic">Specyfikacja WHATWG</a> 
235      </li>
236      <li>
237        <a class="external" href="http://developer.apple.com/docu
>mentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas. 
>html">Apple - Dokumentacja Canvas</a> 
238      </li>
239      <li>
240        <a class="external" href="http://weblogs.mozillazine.org/
>roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thu 
>mbnails</a> 
241      </li>
242      <li>Inne <a href="/Special:Tags?tag=Przyk%C5%82ady_Canvas&a
>mp;language=pl" title="Special:Tags?tag=Przykłady_Canvas&amp;lang 
>uage=pl">przykłady</a>: 
243        <ul>
244          <li>
245            <a href="/pl/Prosty_RayCaster" title="pl/Prosty_RayCa
>ster">Prosty RayCaster</a> 
246          </li>
247          <li>
248            <a class="external" href="http://awordlike.com/">The 
>Lightweight Visual Thesaurus</a> 
249          </li>
250          <li>
251            <a class="external" href="http://caimansys.com/painte
>r/">Canvas Painter</a> 
252          </li>
253        </ul>
254      </li>
255      <li>
256        <a href="/Special:Tags?tag=HTML:Canvas&amp;language=pl" t
>itle="Special:Tags?tag=HTML:Canvas&amp;language=pl">I więcej...</ 
>a> 
257      </li>
258    </ul>
259    <p>
260      {{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "f
>r": "fr/Dessiner_avec_canvas", "ja": "ja/Drawing_Graphics_with_Ca 
>nvas", "ko": "ko/Drawing_Graphics_with_Canvas" } ) }} 
261    </p>

Wróć do historii