aboutsummaryrefslogtreecommitdiff
path: root/files/pl/web/api/canvas_api
diff options
context:
space:
mode:
authorFlorian Dieminger <me@fiji-flo.de>2021-02-11 18:26:59 +0100
committerGitHub <noreply@github.com>2021-02-11 18:26:59 +0100
commit7a94b4d8daf297eda6df8e5cf933f7ba159bbc76 (patch)
treec8c8a36c41beda7a4c150927b2b5c7d2a09837bd /files/pl/web/api/canvas_api
parentab718192b92d5cc38c1114e055a435a6de7dd8ef (diff)
parentb8170f78422f2269dfc9df7760cc1ad51c048c00 (diff)
downloadtranslated-content-7a94b4d8daf297eda6df8e5cf933f7ba159bbc76.tar.gz
translated-content-7a94b4d8daf297eda6df8e5cf933f7ba159bbc76.tar.bz2
translated-content-7a94b4d8daf297eda6df8e5cf933f7ba159bbc76.zip
Merge pull request #38 from fiji-flo/unslugging-pl
Unslugging pl
Diffstat (limited to 'files/pl/web/api/canvas_api')
-rw-r--r--files/pl/web/api/canvas_api/index.html56
-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.html137
-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
4 files changed, 197 insertions, 2 deletions
diff --git a/files/pl/web/api/canvas_api/index.html b/files/pl/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..2e2ae1bbeb
--- /dev/null
+++ b/files/pl/web/api/canvas_api/index.html
@@ -0,0 +1,56 @@
+---
+title: Canvas
+slug: Web/API/Canvas_API
+translation_of: Web/API/Canvas_API
+original_slug: Web/HTML/Canvas
+---
+<div>
+ {{outdated()}}</div>
+<div>
+ <p><strong>Canvas</strong> (<code>&lt;canvas&gt;</code>) jest nowym elementem <a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i <a href="/pl/docs/Prosty_RayCaster" title="pl/docs/Prosty_RayCaster">nie tylko prostych</a>) animacji.</p>
+ <p>Po raz pierwszy <code>&lt;canvas&gt;</code> został przedstawiony przez Apple dla <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> i później zaimplementowany w Safari. Przeglądarki oparte o silnik <a href="/pl/docs/Gecko" title="pl/docs/Gecko">Gecko</a> począwszy od wersji 1.8 (tj. <a href="/pl/docs/Firefox_1.5_dla_programistów" title="pl/docs/Firefox_1.5_dla_programistów">Firefox 1.5</a> oraz późniejsze) obsługują ten nowy element. Również Opera 9 go wspiera. Czynione są starania, aby <code>&lt;canvas&gt;</code> był obsługiwany przez Internet Explorera (zobacz ).</p>
+ <p>Element <code>&lt;canvas&gt;</code> jest częścią specyfikacji <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> znanej także jako HTML 5.</p>
+</div>
+<table class="topicpage-table">
+ <tbody>
+ <tr>
+ <td>
+ <h2 class="Documentation" id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2>
+ <dl>
+ <dt>
+ <a href="/pl/docs/Rysowanie_grafik_za_pomocą_Canvas" title="pl/docs/Rysowanie_grafik_za_pomocą_Canvas">Rysowanie grafik za pomocą Canvas</a></dt>
+ <dd>
+ Wprowadzenie do <code>&lt;canvas&gt;</code>.</dd>
+ <dt>
+ <a href="/pl/docs/Przewodnik_po_canvas" title="pl/docs/Przewodnik_po_canvas">Przewodnik po canvas</a></dt>
+ <dd>
+ <code>&lt;canvas&gt;</code> jest nowym elementem <a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i <a href="/pl/docs/Prosty_RayCaster" title="pl/docs/Prosty_RayCaster">nie tylko prostych</a>) animacji.</dd>
+ <dt>
+ <a href="/pl/docs/Fragmenty_kodu/Canvas" title="pl/docs/Fragmenty_kodu/Canvas">Fragmenty kodu:Canvas</a></dt>
+ <dd>
+ Fragmenty kodu z użyciem <code>&lt;canvas&gt;</code>.</dd>
+ <dt>
+ <a href="/pl/docs/tag/Przykłady_Canvas" title="Special:Tags?tag=Przykłady_Canvas">Przykłady Canvas</a></dt>
+ <dd>
+ Lista różnych przykładów stosujących <code>&lt;canvas&gt;</code>.</dd>
+ <dt>
+ <a href="/pl/docs/Rysowanie_tekstu_za_pomocą_Canvas" title="pl/docs/Rysowanie_tekstu_za_pomocą_Canvas">Rysowanie tekstu za pomocą Canvas</a></dt>
+ <dd>
+ Dokumentacja nowych własności <code>&lt;canvas&gt;</code> dostępnych począwszy od Firefoksa 3</dd>
+ </dl>
+ </td>
+ <td>
+ <h2 class="Community" id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h2>
+ <ul>
+ <li>Zobacz fora Mozilli... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li>
+ <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Grupa Yahoo programistów Canvas</a></li>
+ </ul>
+ <h2 class="Related_Topics" id="Tematy_powi.C4.85zane" name="Tematy_powi.C4.85zane">Tematy powiązane</h2>
+ <ul>
+ <li><a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>, <a href="/pl/docs/CSS" title="pl/docs/CSS">CSS</a>, <a href="/pl/docs/AJAX" title="pl/docs/AJAX">AJAX</a>, <a href="/pl/docs/DOM" title="pl/docs/DOM">DOM</a>, <a href="/pl/docs/SVG" title="pl/docs/SVG">SVG</a></li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+</table>
+<p> </p>
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">&lt;canvas&gt;</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>&lt;tt&gt;textToDraw&lt;/tt&gt;
+</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>&lt;tt&gt;textToMeasure&lt;/tt&gt;
+</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>&lt;tt&gt;textToPath&lt;/tt&gt;
+</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>&lt;tt&gt;textToDraw&lt;/tt&gt;
+</dt><dd>Tekst, który ma zostać narysowany wzdłuż podanej ścieżki.
+</dd><dt>&lt;tt&gt;stroke&lt;/tt&gt;
+</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>