diff options
Diffstat (limited to 'files/pl/web/api/canvas_api/tutorial')
| -rw-r--r-- | files/pl/web/api/canvas_api/tutorial/drawing_shapes/index.html (renamed from files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html) | 3 | ||||
| -rw-r--r-- | files/pl/web/api/canvas_api/tutorial/drawing_text/index.html | 137 | ||||
| -rw-r--r-- | files/pl/web/api/canvas_api/tutorial/optimizing_canvas/index.html (renamed from files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html) | 3 |
3 files changed, 141 insertions, 2 deletions
diff --git a/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html b/files/pl/web/api/canvas_api/tutorial/drawing_shapes/index.html index 08c589844b..2f53156e92 100644 --- a/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html +++ b/files/pl/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -1,7 +1,8 @@ --- title: Rysowanie kształtów w canvas -slug: Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow +slug: Web/API/Canvas_API/Tutorial/Drawing_shapes translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +original_slug: Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/pl/web/api/canvas_api/tutorial/drawing_text/index.html b/files/pl/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..da19fa1cfe --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,137 @@ +--- +title: Rysowanie tekstu przy użyciu canvas +slug: Web/API/Canvas_API/Tutorial/Drawing_text +tags: + - HTML + - HTML:Canvas + - NeedsContent + - Wszystkie_kategorie +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +original_slug: Rysowanie_tekstu_przy_użyciu_canvas +--- +<p>{{ Gecko_minversion_header(1.9) }} +{{ Fx_minversion_header(3) }} +Element <code><a href="pl/HTML/Canvas"><canvas></a></code> wspiera obsługę rysowania tekstu przez eksperymentalne API stworzone w Mozilli. +</p> +<h2 id="Method_overview" name="Method_overview"> Method overview </h2> +<table class="standard-table"> <tbody><tr> +<td> <code>void <a href="#mozDrawText.28.29">mozDrawText</a>(w <a href="pl/DOMString">DOMString</a> textToDraw);</code> +</td></tr> +<tr> +<td> <code>float <a href="#mozMeasureText.28.29">mozMeasureText</a>(w DOMString textToMeasure);</code> +</td></tr> +<tr> +<td> <code>void <a href="#mozPathText.28.29">mozPathText</a>(w DOMString textToPath);</code> +</td></tr> +<tr> +<td> <code>void <a href="#mozTextAlongPath.28.29">mozTextAlongPath</a>(w DOMString textToDraw, w boolean stroke);</code> +</td></tr> +</tbody></table> +<h2 id="Atrybuty" name="Atrybuty"> Atrybuty </h2> +<table class="standard-table"> <tbody><tr> +<td class="header">Atrybut +</td><td class="header">Typ +</td><td class="header">Opis +</td></tr> <tr> +<td><code>mozTextStyle</code> +</td><td><code><a href="pl/DOMString">DOMString</a></code> +</td><td>Przy rysowaniu tekstu używany jest aktualny styl. Ciąg używa takiej samej składni jak <a href="pl/CSS/font">CSS font</a>. Aby zmienić styl tekstu, po prostu zmień wartości atrybutu tak jak zaprezentowano to poniżej. Domyślna czcionka to 12-point sans-serif. +<p>Przykład: +</p> +<pre class="eval">ctx.mozTextStyle = "20pt Arial"; +</pre> +</td></tr></tbody></table> +<h2 id="Metody" name="Metody">Metody</h2> +<h3 id="mozDrawText.28.29" name="mozDrawText.28.29">mozDrawText()</h3> +<p>Rysuje podany tekst używając stylu tekstu podanego w atrybucie <code>mozTextStyle</code>. Kolor wypełnienia kontekstu zostanie użyty jako kolor tekstu. +</p> +<pre class="eval">void mozDrawText( + in DOMString textToDraw +); + +</pre> +<h6 id="Parametry" name="Parametry">Parametry</h6> +<dl><dt><tt>textToDraw</tt> +</dt><dd>Tekst rysowany w tym kontekście. +</dd></dl> +<h6 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h6> +<pre class="eval">ctx.translate(10, 50); +ctx.fillStyle = "Red"; +ctx.mozDrawText("Przykładowy ciąg"); +</pre> +<p>Ten kod rysuje tekst "Przykładowy ciąg" na czerwono w pozycji (10,50) elementu canvas. +</p> +<h3 id="mozMeasureText.28.29" name="mozMeasureText.28.29">mozMeasureText()</h3> +<p>Zwraca szerokość, w pikselach, jaką podany tekst zajmie kiedy zostanie narysowany w aktualnie użytym stylu. +</p> +<pre class="eval">float mozMeasureText( + in DOMString textToMeasure +); +</pre> +<h6 id="Parametery" name="Parametery">Parametery</h6> +<dl><dt><tt>textToMeasure</tt> +</dt><dd>Ciąg, którego szerokośc w pikselach chcemy ustalić. +</dd></dl> +<h6 id="Zwracana_warto.C5.9B.C4.87" name="Zwracana_warto.C5.9B.C4.87">Zwracana wartość</h6> +<p>Szerokość tekstu w pikselach. +</p> +<h6 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2">Przykład</h6> +<pre class="eval">var text = "Przykładowy ciąg"; +var width = ctx.canvas.width; +var len = ctx.mozMeasureText(text); +ctx.translate((width - len)/2, 0); +ctx.mozDrawText(text); +</pre> +<p>Ten przykład określa szerokość ciągu, a następnie korzstając z tych danych ryskuje go na horyzontalnym środku w elemencie canvas. +</p> +<h3 id="mozPathText.28.29" name="mozPathText.28.29">mozPathText()</h3> +<p>Dodaje kontury tekstu do aktualnej ścieżki. Pozwala to na obrysowanie tekstu zamiast wypełniania go. +</p> +<pre class="eval">void mozPathText( + in DOMString textToPath +); +</pre> +<h6 id="Parametery_2" name="Parametery_2">Parametery</h6> +<dl><dt><tt>textToPath</tt> +</dt><dd>Tekst, którego kontury mają zostać dodane do aktualnej ścieżki. +</dd></dl> +<h6 id="Example" name="Example">Example</h6> +<pre class="eval">ctx.fillStyle = "green"; +ctx.strokeStyle = "black"; +ctx.mozPathText("Przykładowy ciąg"); +ctx.fill() +ctx.stroke() +</pre> +<p>Ten kod narysuje tekst "Przykładowy ciąg" na zielono z czarną obwódką przez dodanie konturów tekstu do ścieżki, a następnie wypełniając ścieżkę i nakładając kontur. +</p> +<h3 id="mozTextAlongPath.28.29" name="mozTextAlongPath.28.29">mozTextAlongPath()</h3> +<p>Dodaje (lub rysuje) określony tekst wzdłuż podanej ścieżki. +</p> +<pre class="eval">void mozTextAlongPath( + in DOMString textToDraw, + in boolean stroke +); +</pre> +<h6 id="Parametery_3" name="Parametery_3">Parametery</h6> +<dl><dt><tt>textToDraw</tt> +</dt><dd>Tekst, który ma zostać narysowany wzdłuż podanej ścieżki. +</dd><dt><tt>stroke</tt> +</dt><dd>Jeśli ten parametr ma wartość <code>true</code>, wówczas tekst będzie rysowany wzdłuż podanej ścieżki. Jeśli ma wartość <code>false</code>, tekst zostanie zamiast tego dodany do ścieżki, na końcu. +</dd></dl> +<h6 id="Uwagi" name="Uwagi">Uwagi</h6> +<p>Glify nie są skalowane ani transformowane zgodnie z krzywymi ścieżki; zamiast tego, każdy glif jest renderowany traktując ścieżkę pod sobą jako prostą linię. Można to wykorzystać do stworzenia unikatowych efektów. +</p> +<h2 id="Notatki" name="Notatki"> Notatki </h2> +<ul><li> Te rozszerzenia nie są jeszcze ustandardyzowane przez WHATWG. +</li><li> Nie potrzebujesz specjalnego kontekstu, aby tego używać; kontekst 2D wystarczy. +</li><li> Wszelkie rysowanie odbywa się przy użyciu aktualnej transformacji. +</li><li> Aby dowiedzieć się więcej o detalach implementacji zajrzyj do {{ Bug(339553) }}. +</li></ul> +<h2 id="Dodatkowe_przyk.C5.82ady" name="Dodatkowe_przyk.C5.82ady"> Dodatkowe przykłady </h2> +<ul><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">Rysowanie tekstu konturem wokół ścieżki</a> +</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">Rysowanie wzdłuż ścieżki</a> +</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">Animowanie ruchu tekstu wokół kółka</a>. +</li></ul> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Drawing_text_using_a_canvas", "es": "es/Dibujar_texto_usando_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas" } ) }} diff --git a/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html b/files/pl/web/api/canvas_api/tutorial/optimizing_canvas/index.html index 68efe0225f..162a62d266 100644 --- a/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html +++ b/files/pl/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -1,6 +1,6 @@ --- title: Optymalizacja elementu canvas -slug: Web/API/Canvas_API/Tutorial/Optymalizacja_canvas +slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas tags: - Canvas - Grafika @@ -10,6 +10,7 @@ tags: - Tutorial - zaawansowany translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +original_slug: Web/API/Canvas_API/Tutorial/Optymalizacja_canvas --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> |