Rysowanie grafik za pomocą Canvas

  • Ciąg znaków tej wersji: Rysowanie_grafik_za_pomocą_Canvas
  • Tytuł wersji: Rysowanie grafik za pomocą Canvas
  • Identyfikator wersji: 272718
  • Utworzono:
  • Autor: Taw
  • Czy jest aktualna? Nie
  • Komentarz drawWindow should use rgb(255,255,255) not rgb(0,0,0) background; 3 words added, 3 words removed

Zawartość wersji

{{ Dopracuj() }}

Wprowadzenie

Od wersji Firefoksa 1.5, Firefox zawiera nowy element HTML dla programowalnej grafiki - <canvas> oparty na specyfikacji: WHATWG canvas specification, która bazuje na specyfikacji <canvas> Apple'a wprowadzonej w Safari. Może być użyty dla wyświetlania grafik, elementów interfejsu użytkownika, i innych grafik tworzonych po stronie klienta.

Element <canvas> tworzy powierzchnię do rysowania o stałej wielkości that exposes one or more rendering contexts. We'll focus on the 2D rendering context (incidentally, the only currently defined rendering context). In the future, 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 <canvas> specification.

The 2D Rendering Context

Prosty przykład

Rozpoczniemy od prostego przykładu w którym narysujemy dwa przecinające się prostokąty , z których jeden posiada przezroczystość alpha:

Przykład 1.

<html>
 <head>
  <script type="application/x-javascript">
function draw() {
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 50, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 50, 50);
}
  </script>
 </head>
 <body onload="draw()">
   <canvas id="canvas" width="300" height="300"></canvas>
 </body>
</html>

Funkcja draw gets the canvas element, then obtains the 2d context. The ctx object can then be used to actually render to the canvas. Przykład po prostu wypełnia dwa prostokąty ,używając własności wypełnienia fillStyle dla dwóch różnych kolorów ze specyfikacji CSS i wywołując funkcję fillRect. Drugie wypełnienie używa wartości rgba()aby wraz z kolorem określić wartość przezroczystości alpha .

Funkcja fillRect, strokeRect, i clearRect wywołuje rysowanie wypełnienia, konturu, lub wyczyszczenie prostokata. Żeby rysować bardziej skomplikowane kształty, są używane ścieżki.

Zastosowanie ścieżek

Funkcja beginPathtworzy nową ścieżkę, i za pomocą moveTo, lineTo, arcTo, arc, oraz podobnych metod dodajemy do niej kolejne segmenty owej ścieżki. Ścieżkę kończymy używając funkcji closePath. Jeśli tylko scieżka zostanie utworzona, możemy użyć fill lub stroke do odtworzenia ścieżki dla elementu canvas .

Przykład 2.

<html>
 <head>
  <script type="application/x-javascript">
function draw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "red";

  ctx.beginPath();
  ctx.moveTo(30, 30);
  ctx.lineTo(150, 150);
  ctx.quadraticCurveTo(60, 70, 70, 150);
  ctx.lineTo(30, 30);
  ctx.fill();
}
   </script>
 </head>
 <body onload="draw()">
   <canvas id="canvas" width="300" height="300"></canvas>
 </body>
</html>

Calling fill() lub stroke() causes the current path to be used. To be filled or stroked again, the path must be recreated.

Graphics State

Attributes of the context such as fillStyle, strokeStyle, lineWidth, and lineJoin are part of the current graphics state. The context provides two methods, save() and restore(), that can be used to move the current state to and from the state stack.

Bardziej skomplikowany przykład

Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods translate(), scale(), and rotate() all transform the current matrix. All rendered points are first transformed by this matrix.

Przykład 3.

 <html>
  <head>
   <script type="application/x-javascript">
 function drawBowtie(ctx, fillStyle) {
 
   ctx.fillStyle = "rgba(200,200,200,0.3)";
   ctx.fillRect(-30, -30, 60, 60);
 
   ctx.fillStyle = fillStyle;
   ctx.globalAlpha = 1.0;
   ctx.beginPath();
   ctx.moveTo(25, 25);
   ctx.lineTo(-25, -25);
   ctx.lineTo(25, -25);
   ctx.lineTo(-25, 25);
   ctx.closePath();
   ctx.fill();
 }
 
 function dot(ctx) {
   ctx.save();
   ctx.fillStyle = "black";
   ctx.fillRect(-2, -2, 4, 4);
   ctx.restore();
 }
 
 function draw() {
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");

   // note that all other translates are relative to this
   // one
   ctx.translate(45, 45);

   ctx.save();
   //ctx.translate(0, 0); // unnecessary
   drawBowtie(ctx, "red");
   dot(ctx);
   ctx.restore();
 
   ctx.save();
   ctx.translate(85, 0);
   ctx.rotate(45 * Math.PI / 180);
   drawBowtie(ctx, "green");
   dot(ctx);
   ctx.restore();
 
   ctx.save();
   ctx.translate(0, 85);
   ctx.rotate(135 * Math.PI / 180);
   drawBowtie(ctx, "blue");
   dot(ctx);
   ctx.restore();
 
   ctx.save();
   ctx.translate(85, 85);
   ctx.rotate(90 * Math.PI / 180);
   drawBowtie(ctx, "yellow");
   dot(ctx);
   ctx.restore();
 }
    </script>
  </head>
  <body onload="draw()">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
 </html>

This defines two methods, drawBowtie and dot, that are called 4 times. Before each call, translate() and rotate() are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. dot renders a small black square centered at (0, 0). That dot is moved around by the transformation matrix. drawBowtie renders a simple bowtie path using the passed-in fill style.

As matrix operations are cumulative, save() and restore() are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a translate() rotate() translate() sequence will yield different results than a translate() translate() rotate() series of calls.

Compatibility With Apple <canvas>

For the most part, <canvas> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.

Żądany znacznik </canvas>

In the Apple Safari implementation, <canvas> is an element implemented in much the same way <img> is; it does not have an end tag. However, for <canvas> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a required end tag.

If fallback content is not needed, a simple <canvas id="foo" ...></canvas> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content). Todo: get hixie to put the CSS bits in

Dodatkowe możliwości

Rendering Web Content Into A Canvas

This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages.

Mozilla's canvas is extended with the drawWindow method. This method draws a snapshot of the contents of a DOM window into the canvas. For example,

ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");

would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, 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).

With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.

Ted Mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.

Zobacz także

{{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "fr": "fr/Dessiner_avec_canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas" } ) }}

Źródło wersji

<p>{{ Dopracuj() }}</p>
<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3>
<p>Od wersji <a href="/pl/Firefox_1.5_dla_programistów" title="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" href="http://www.whatwg.org/specs/web-apps/current-work/#scs-dynamic">WHATWG canvas specification</a>, która bazuje na specyfikacji <code>&lt;canvas&gt;</code> Apple'a wprowadzonej w Safari. Może być użyty dla wyświetlania grafik, elementów interfejsu użytkownika, i innych grafik tworzonych po stronie klienta.</p>
<p>Element <code>&lt;canvas&gt;</code> tworzy powierzchnię do rysowania o stałej wielkości that exposes one or more <em>rendering contexts</em>. We'll focus on the 2D rendering context (incidentally, the only currently defined rendering context). In the future, 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> specification.</p>
<h3 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">The 2D Rendering Context</h3>
<h4 id="Prosty_przyk.C5.82ad" name="Prosty_przyk.C5.82ad">Prosty przykład</h4>
<p>Rozpoczniemy od prostego przykładu w którym narysujemy dwa przecinające się prostokąty , z których jeden posiada przezroczystość alpha:</p>
<p><img align="right" alt="Przykład 1." class=" internal" src="/@api/deki/files/2408/=Canvas_ex1.png"></p>
<pre class="eval">&lt;html&gt;
 &lt;head&gt;
  &lt;script type="application/x-javascript"&gt;
function draw() {
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 50, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 50, 50);
}
  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="draw()"&gt;
   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Funkcja <code>draw</code> gets the <code>canvas</code> element, then obtains the <code>2d</code> context. The <code>ctx</code> object can then be used to actually render to the canvas. Przykład po prostu wypełnia dwa prostokąty ,używając własności wypełnienia <code>fillStyle</code> dla dwóch różnych kolorów ze specyfikacji 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 .</p>
<p>Funkcja <code>fillRect</code>, <code>strokeRect</code>, i <code>clearRect</code> wywołuje rysowanie wypełnienia, konturu, lub wyczyszczenie prostokata. Żeby rysować bardziej skomplikowane kształty, są używane ścieżki.</p>
<h4 id="Zastosowanie_.C5.9Bcie.C5.BCek" name="Zastosowanie_.C5.9Bcie.C5.BCek">Zastosowanie ścieżek</h4>
<p>Funkcja <code>beginPath</code>tworzy nową ścieżkę, i za pomocą <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>closePath</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 .</p>
<p><img align="right" alt="Przykład 2." class=" internal" src="/@api/deki/files/2409/=Canvas_ex2.png"></p>
<pre class="eval">&lt;html&gt;
 &lt;head&gt;
  &lt;script type="application/x-javascript"&gt;
function draw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "red";

  ctx.beginPath();
  ctx.moveTo(30, 30);
  ctx.lineTo(150, 150);
  ctx.quadraticCurveTo(60, 70, 70, 150);
  ctx.lineTo(30, 30);
  ctx.fill();
}
   &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="draw()"&gt;
   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Calling <code>fill()</code> lub <code>stroke()</code> causes the current path to be used. To be filled or stroked again, the path must be recreated.</p>
<h4 id="Graphics_State" name="Graphics_State">Graphics State</h4>
<p>Attributes of the context such as <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJoin</code> are part of the current <em>graphics state</em>. The context 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.</p>
<h4 id="Bardziej_skomplikowany_przyk.C5.82ad" name="Bardziej_skomplikowany_przyk.C5.82ad">Bardziej skomplikowany przykład</h4>
<p>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 rendered points are first transformed by this matrix.</p>
<p><img align="right" alt="Przykład 3." class=" internal" src="/@api/deki/files/2410/=Canvas_ex3.png"></p>
<pre> &lt;html&gt;
  &lt;head&gt;
   &lt;script type="application/x-javascript"&gt;
 function drawBowtie(ctx, fillStyle) {
 
   ctx.fillStyle = "rgba(200,200,200,0.3)";
   ctx.fillRect(-30, -30, 60, 60);
 
   ctx.fillStyle = fillStyle;
   ctx.globalAlpha = 1.0;
   ctx.beginPath();
   ctx.moveTo(25, 25);
   ctx.lineTo(-25, -25);
   ctx.lineTo(25, -25);
   ctx.lineTo(-25, 25);
   ctx.closePath();
   ctx.fill();
 }
 
 function dot(ctx) {
   ctx.save();
   ctx.fillStyle = "black";
   ctx.fillRect(-2, -2, 4, 4);
   ctx.restore();
 }
 
 function draw() {
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");

   // note that all other translates are relative to this
   // one
   ctx.translate(45, 45);

   ctx.save();
   //ctx.translate(0, 0); // unnecessary
   drawBowtie(ctx, "red");
   dot(ctx);
   ctx.restore();
 
   ctx.save();
   ctx.translate(85, 0);
   ctx.rotate(45 * Math.PI / 180);
   drawBowtie(ctx, "green");
   dot(ctx);
   ctx.restore();
 
   ctx.save();
   ctx.translate(0, 85);
   ctx.rotate(135 * Math.PI / 180);
   drawBowtie(ctx, "blue");
   dot(ctx);
   ctx.restore();
 
   ctx.save();
   ctx.translate(85, 85);
   ctx.rotate(90 * Math.PI / 180);
   drawBowtie(ctx, "yellow");
   dot(ctx);
   ctx.restore();
 }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="draw()"&gt;
    &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
 &lt;/html&gt;
</pre>
<p>This defines two methods, <code>drawBowtie</code> and <code>dot</code>, that are called 4 times. Before each call, <code>translate()</code> and <code>rotate()</code> are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. <code>dot</code> renders a small black square centered at <code>(0, 0)</code>. That dot is moved around by the transformation matrix. <code>drawBowtie</code> renders a simple bowtie path using the passed-in fill style.</p>
<p>As matrix operations are cumulative, <code>save()</code> and <code>restore()</code> are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a <code>translate() rotate() translate()</code> sequence will yield different results than a <code>translate() translate() rotate()</code> series of calls.</p>
<h3 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibility With Apple &lt;canvas&gt;</h3>
<p>For the most part, <code>&lt;canvas&gt;</code> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.</p>
<h4 id=".C5.BB.C4.85dany_znacznik_.3C.2Fcanvas.3E" name=".C5.BB.C4.85dany_znacznik_.3C.2Fcanvas.3E">Żądany znacznik <code>&lt;/canvas&gt;</code></h4>
<p>In the Apple Safari implementation, <code>&lt;canvas&gt;</code> 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 facility for fallback content must be provided. Therefore, Mozilla's implementation has a <em>required</em> end tag.</p>
<p>If fallback content is not needed, a simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.</p>
<p>If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content). <strong>Todo: get hixie to put the CSS bits in</strong></p>
<h3 id="Dodatkowe_mo.C5.BCliwo.C5.9Bci" name="Dodatkowe_mo.C5.BCliwo.C5.9Bci">Dodatkowe możliwości</h3>
<h4 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Rendering Web Content Into A Canvas</h4>
<div class="note">This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages.</div>
<p>Mozilla's <code>canvas</code> is extended with the <code>drawWindow</code> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p>
<pre class="eval">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
</pre>
<p>would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, 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).</p>
<p>With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.</p>
<p>Ted Mielczarek's <a class="external" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.</p>
<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3>
<ul> <li><a href="/pl/Przewodnik_po_canvas" title="pl/Przewodnik_po_canvas">Przewodnik po canvas</a></li> <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#scs-dynamic">Specyfikacja WHATWG</a></li> <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html">Apple - Dokumentacja Canvas</a></li> <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> <li>Inne <a href="/Special:Tags?tag=Przykłady_Canvas&amp;language=pl" title="Special:Tags?tag=Przykłady_Canvas&amp;language=pl">przykłady</a>: <ul> <li><a href="/pl/Prosty_RayCaster" title="pl/Prosty_RayCaster">Prosty RayCaster</a></li> <li><a class="external" href="http://awordlike.com/">The Lightweight Visual Thesaurus</a></li> <li><a class="external" href="http://caimansys.com/painter/">Canvas Painter</a></li> </ul> </li> <li><a href="/Special:Tags?tag=HTML:Canvas&amp;language=pl" title="Special:Tags?tag=HTML:Canvas&amp;language=pl">I więcej...</a></li>
</ul>
<p>{{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "fr": "fr/Dessiner_avec_canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas" } ) }}</p>
Przywróć do tej wersji