Базовое использование Canvas

This translation is incomplete. Please help translate this article from English.

Элемент <canvas>

Давайте начнем этот урок с изучения элемента <canvas> как такового. В конце этой страницы Вы узнаете как устанавливать canvas 2D context и нарисуете первый пример в вашем браузере.

<canvas id="tutorial" width="150" height="150"></canvas>

Он выглядит как елемент <img>, но только отличие в том что он не имеет аттрибутов src и alt. Элемент <canvas> имеет только два аттрибута - ширину и высоту. Оба они не обязательны и могут быть выставлены с исользованием свойтв DOM. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной 300 писелей и в высоту 150 пикселей. Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.

Примечание: Если вид вашего изображения кажется вам искаженным, попробуйте указать свои атрибуты ширину и высоту в явном виде в аттрибутах <canvas> , а не с помощью CSS.

Артибут id не специфичен для элемента <canvas> но он может быть применен по умолчанию  в атрибутах HTML так как он можеть быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать id, так как это позволяет намного проще идентифицировать наш элемент в сценарии.

Элемент <canvas> может быть стилизован также как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны canvas будет по умолчанию абсолютно прозрачным.

Запасное содержимое

Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент <canvas>, Вам следует предоставить запасное содержимое для отображения этими браузерами.

Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента <canvas>. Браузеры, которые не поддерживают <canvas> проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают <canvas> проигнорируют запасное содержимое, и просто нормально отобразят canvas.

Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

Сообщать пользователю о том, что его браузер не поддерживает canvas не поможет тем, кто не может прочесть содержимое тега canvas, к примеру. Предоставление полезной информации в дополнительном canvas делает этот тег более доступным для широкого использования.

Требуется тег </canvas>

В отличии от элемента <img>, элемент <canvas>  требует закрывающийся тег (</canvas>). Если этот тег не предоставлен, остаток документа будет считаться запасным контентом и не будет отображен.

Если запасной контент не нужен, простой  <canvas id="foo" ...></canvas> полностью совместим со всеми браузерами, что поддерживают canvas.

The rendering context

<canvas> creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, WebGL uses a 3D context ("experimental-webgl") based on OpenGL ES.

The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The <canvas> element has a method called getContext(), used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify "2d".

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

The first line retrieves the DOM node for the <canvas> element by calling the document.getElementById() method. Once you have the element node, you can access the drawing context using its getContext() method.

Проверка поддержки

The fallback content is displayed in browsers which do not support <canvas>. Scripts can also check for support programatically by simply testing for the presence of the getContext() method. Our code snippet from above becomes something like this:

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

A skeleton template

Here is a minimalistic template, which we'll be using as a starting point for later examples.

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

The script includes a function called draw(), which is executed once the page finishes loading; this is done by using the load event on the document. This function, or one like it, could also be called using window.setTimeout(), window.setInterval(), or any other event handler, as long as the page has been loaded first.

Here's what the template looks like in action:

Простой пример

Для начала, давайте посмотрим на простой пример, который рисует два интересных прямоугольника, один из которых имеет прозрачность alpha. Мы изучим как это работает более детально в последующих примерах.

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

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

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

Этот пример выглядит так:

ScreenshotLive sample

Метки документа и участники

Contributors to this page: lazyexpert, Neir, raspberry59, hmelenok, Techno1994
Обновлялась последний раз: lazyexpert,