1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
---
title: Rysowanie grafiki z elementem canvas
slug: Web/API/Canvas_API/Tutorial
tags:
- Grafika
- HTML
- HTML5
- Internet
- Kanwa
- Poradnik
- instrukcja
translation_of: Web/API/Canvas_API/Tutorial
---
<div>{{CanvasSidebar}}</div>
<div><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div>
<div class="summary">
<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> jest elementem <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a>, który może być użyty do rysowania grafik używając skryptów (często <a href="https://developer.mozilla.org/pl/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>'u). To może zostać użyte do na przykład rysowania wykresów, tworzenia kompozycji zdjęcia lub prostych (i <a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">i nie prostych</a>) animacji. Obrazy na tej strone pokazują przykłady implementacji <strong><code><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><canvas></a></code></strong>, które będą stworzone w tym poradniku.</p>
</div>
<p><span class="seoSummary">Ten poradnik opisuje jak używać elementu <code><canvas></code> do rysowania grafik 2D, rozpoczynając od podstaw. Zawarte przykłady powinny dać Ci kilka czystych pomysłów co możesz zrobić z kanwą i zapewnią przykłady kodu, które mogą ci pomóc w budowaniu własnej zawartości.</span></p>
<p>Wprowadzono ją jako pierwszą w WebKit przez Apple dla OS X Dashboard, <code><canvas></code> od tego momentu została wprowadzona do przeglądarek. Dziś wszystkie poważne przeglądarki wspierają kanwę.</p>
<h2 id="Before_you_start" name="Before_you_start">Zanim zaczniesz</h2>
<p>Używanie elementu <code><canvas></code> nie jest trudne, ale potrzebujesz podstawowego zrozumienia <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> i <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. Element <code><canvas></code> nie jest wspierany w kilku starszych przeglądarkach, ale ma wsparcie ze strony nowych wersji poważnych przeglądarek. Domyślnym rozmiarem kanwy jest 300 px × 150 px (szerokość × wysokość). Ale własne rozmiary mogą zostać zdefiniowane za pomocą własności HTML <code>height</code> i <code>width</code>. W celu narysowania grafik na kanwie używamy obiektu kontekstu w JavaScript, który tworzy grafiki w locie.</p>
<h2 id="In_this_tutorial" name="In_this_tutorial">W tym poradniku</h2>
<ul>
<li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/Basic_usage">Podstawowe użycie</a></li>
<li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow" title="Canvas_tutorial/Drawing_shapes">Rysowanie figur</a></li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Dodawanie styli i kolorów</a></li>
<li><a href="/pl/docs/Rysowanie_tekstu_przy_użyciu_canvas">Rysowanie tekstu</a></li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Używanie obrazków</a></li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Przekształcenia</a></li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing and clipping</a></li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">Podstwowe animacje</a></li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Zaawansowane animacje</a></li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulacja pikselami</a></li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hitowe regiony i dostępność</a></li>
<li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/Optymalizacja_canvas">Optymizacja kanwy</a></li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Koniec</a></li>
</ul>
<h2 id="See_also" name="See_also">Zobacz także</h2>
<ul>
<li><a href="/pl/docs/Web/HTML/Canvas" title="HTML/Canvas">Strona tematów kanwy</a></li>
<li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Wtyczka Canvas do Adobe Illustrator'a</a></li>
<li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
</ul>
<h2 id="Notka_dla_współtwórców">Notka dla współtwórców</h2>
<p>Z powodu niefortunnego błędu technicznego, który miał miejsce 17 Czerwca 2013, straciliśmy historię tego poradnika, wliczając w to także atrybucje do wszystkich współtwórców do zawartości tego. Przepraszamy za to i mamy nadzieję, że wybaczycie nam tą niefortunną wpadkę.</p>
<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>
|
