Базове використання canvas

Переклад цієї статті ще не завершено. Будь ласка, допоможіть перекласти цю статтю з англійської мови

Давайте почнемо цей урок з розгляду елемента  <canvas> HTML як такого. Наприкінці ви дізнаєтесь, як задати canvas 2D context та  зможете намалювати перший приклад в соєму браузері.

Елемент <canvas>

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

Елемент <canvas> схожий на елемент <img> , з єдиною видимою різницею - він не має атрибутів src та alt attributes. Дійсно, <canvas> має лише два атрибути, width таheight. Обидва вони не є обов'язковими, та можуть бути задані за допомогою DOM властивостей. Коли значення width та height не встановлені, canvas за замовчуванням буде 300 пікселів шириною, та 150 пікселів у висоту. Також можливо задати довільні розміри за допомогою  CSS, але під час ренедерингу зображення буде масштабуватися згідно з його розмірами: якщо задані в CSS параметри не відповідають початковому співвідношенню сторін canvas, воно буде викривленим. 

Примітка: Якщо ваше зображення здається викривленимб спробуйте задати атрибути width and height атрибути в тегу <canvas> не використовуючи CSS.

Атрибут id не специфіцний для  <canvas>, проте це один з global HTML attributes які можна викростивувати для  HTML елементів (наприклад, class). Використання id завжди є хорошим рішенням, тому що полегшує ідентифікацію елемента в скрипті. .

<canvas> може бути стилізований так само, як і будь-яке звичайне зображення (margin, border, background…). Ці правила, однак, не впливають на фактичний малюнок на canvas. Ми побачимо, як це робиться в спеціальній главі цього підручника. Якщо до canvas не застосовуються правила стилізації, воно за замовчуванням буде повністю прозорим.

Резервний вміст

<canvas> відрізняється від <img> тим, щоя як і для <video>, <audio>, або <picture> елементів, легко визначити деякий резервний вміст, котрий буде відображатися в старих браузерах, що не підтримують <canvas>, таких, як версії Internet Explorer до 9ї версії чи  текстових браузерах. Ви завжди повинні задавати резервний вміст, який буде відображатися в таких браузерах.

Задати резервний вміст дуже просто, достатнь просто вставити альтернативний контент всередину елемента <canvas>. Браузери, які його не підтримують, проігноруюьб контейнер та відобразять альтернативний вміст замість нього. Браузери, які підтримують, пропустять вміст <canvas> і просто покажуть зображення нормально.

наприклад, ми можемо задати текстовий опис вмісту  canvas чи використати статичне зображення динамічно створюваного контентуge of the dynamically rendered content. This can look something like this:

<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, наприклад. Використання резервного вмісту або додаткового DOM допомогає make the canvas more accessible.

Обов'язковий тег </canvas> 

Як наслідок способу надання резервного вмісту,  на відміну від елемента <img>, <canvas> вимагає  закриваючого тега (</canvas>). у випадку його відстусності, весь документ після  </canvas> буде розглядатися як резервний вміст та не буде показаний.

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

The rendering context

The <canvas> element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. In this tutorial, we focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, WebGL uses a 3D context 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" to get a CanvasRenderingContext2D.

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

The first line in the script retrieves the node in the DOM representing 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.

Checking for support

The fallback content is displayed in browsers which do not support <canvas>. Scripts can also check for support programmatically 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.

Note: it is not good practice to embed a script inside HTML. We do it here to keep the example concise.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <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 listening for 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 is how a template would look in action. As shown here, it is initially blank.

A simple example

To begin, let's take a look at a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <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, 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="150" height="150"></canvas>
 </body>
</html>

This example looks like this:

ScreenshotLive sample