Основы Canvas HTML5: принципы рисования

5 (100%) 3 vote[s]

Основы Canvas HTML5 довольно простые. Canvas — это простой 2D API. Если вы уже работали с Flash или Java 2D, это должно показаться вам знакомым. Вы получаете ссылку на графический контекст, устанавливаете некоторые свойства, такие как текущая заливка или цвет обводки, а затем рисуете любые фигуры.

Способы рисования и место canvas среди них

Есть четыре способа рисования: Canvas, SVG, CSS и прямая анимация DOM.  Canvas отличается от трех других:

SVG : SVG — векторный API, который рисует фигуры. У каждой фигуры есть объект, к которому вы можете прикрепить обработчики событий. Если вы увеличиваете масштаб, форма остается гладкой, тогда как Canvas станет размытым (пиксельным).

CSS : CSS на самом деле это стилизация элементов DOM. Поскольку то, что вы рисуете в канвас, не является объектом DOM , вы не можете использовать CSS для его стилизации. CSS будет влиять только на прямоугольную область самого Canvas, поэтому вы можете установить границы и цвет фона, но не более.

Анимация DOM : DOM , или Document Object Model, определяет объект для всего на экране. Анимация DOM с помощью CSS или JavaScript для перемещения объектов в некоторых случаях может быть более плавной, чем при использовании Canvas, но это зависит от реализации вашего браузера.

Canvas более низкого уровня, чем другие перечисленные способы, поэтому можно лучше контролировать рисование и использовать меньше памяти, но за счет необходимости писать больше кода. Используйте SVG, когда у вас есть существующие фигуры, которые вы хотите отобразить на экране, например, карту, вышедшая из Adobe Illustrator. Используйте анимацию CSS или DOM, если у вас есть большие статические области, которые вы хотите анимировать, или если вы хотите использовать 3D-преобразования. Для диаграмм, графиков, динамических диаграмм и, конечно же, видеоигр Canvas — отличный выбор.

Когда мы говорим о Canvas, имеем в виду 2D API. Существует также 3D API в работах под названием WebGL. Он все еще находится в стадии разработки, и поддержка браузерами довольно слабая. Кроме того, это по сути OpenGL из JavaScript, что делает его более низким уровнем, чем Canvas, и намного более сложным в использовании. 

Основы canvas: система координат

Canvas имеет начало отсчета в верхнем левом углу, а ось у направлена ​​вниз. Это традиционно для компьютерной графики, но если вам нужно другое происхождение, вы можете сделать это с помощью преобразований, о которых мы расскажем позже. Еще одна важная вещь: спецификация Canvas определяет координаты в верхнем левом углу пикселя.

Система координат, используемая для рисования на Canvas, аналогична той, которая используется во многих API рисования, таких как Java2D: (0, 0) находится в верхнем левом углу, а ось X направлена ​​вправо, а ось Y — вниз, как показано на следующем рисунке:

Основы canvas: рисование прямоугольников

Пример типичного использования canvas:

1 — добавить элемент <canvas> на страницу HTML:

<canvas id="myCanvas" width="300" height="225">
    Резервный контент, который будет отображаться в случае, если веб-браузер
    не  поддерживает тег canvas или в случае, когда JS сценарии
    отключены.
</canvas>

Поместите код, аналогичный приведенному выше, где-нибудь на HTML-странице. В этом примере определяется область размером 300 на 225 пикселей, в которой содержимое может отображаться с помощью JavaScript.

Обычно вы ничего не должны видеть в результате; по умолчанию полотна являются «прозрачными».

Делаем его видимым с помощью CSS. Хорошей практикой, когда вы учитесь использовать холсты, является использование CSS для визуализации формы холста. Это не обязательно, просто хороший трюк для удобства работы с ним.

Три строки CSS создадут рамку вокруг холста с черным id = «myCanvas» шириной 1 пиксель:

Код CSS:

<style>
    #myCanvas {
        border:1px solid black;
    }
</style>

2 — Выберите элемент <canvas> для использования из JavaScript

У нас может быть более одного <canvas> на одной странице, и холсты будут работать с JavaScript, как и другие элементы в DOM.

Например при помощи document.getElementById() :

var canvas = document.getElementById("myCanvas");

… или с методом querySelector (), представленным в HTML5, который является более современным методом и использует синтаксис селектора CSS для выбора элементов:

var canvas = document . querySelector ( "#myCanvas" );

3 — получить «2D-контекст», связанный с холстом, необходимый для рисования и настройки свойств чертежа (цвет и т. д.)

Как только у нас есть указатель на <canvas> , мы можем получить «контекст».

Этот конкретный объект является ядром JavaScript API Canvas.

Он предоставляет методы для рисования, например, fillRect (x, y, width, height)  , который рисует закрашенный прямоугольник, и свойства для установки цвета, теней, градиентов и т. д.

Получение контекста (сделать это только один раз):

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

4-укажите некоторые свойства рисунка (необязательно):   

Установите цвет для рисования заполненных фигур:

ctx . fillStyle = 'red' ;

5-нарисуйте заполненный прямоугольник (можно нарисовать несколько фигур):

ctx . fillRect ( 0 , 0 , 80 , 100 );

Получим такой результат:

Вот так будет выглядеть код страницы HTML:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myCanvas {
            border: 1px solid black;
         }
      </style>
      <title>Canvas</title>
      <meta charset="utf-8"/>
      <script>
         var canvas, ctx;
         function init() {
// Эта функция вызывается после загрузки страницы
// 1 - Получить холст
         canvas = document.getElementById('myCanvas');
// 2 - получить context
         ctx=canvas.getContext('2d');
// 3 - теперь можем рисовать draw
         drawSomething();
      }
      function drawSomething() {
// рисуем красный прямоугольник
         ctx.fillStyle='#FF0000';
         ctx.fillRect(0,0,80,100);
      }
      </script>
   </head>
   <body onload="init();">
     <canvas id="myCanvas" width="200" height="200">
      Ваш браузер не поддерживает тег canvas.
     </canvas>
   </body>
</html>

Доступ к элементам только тогда, когда DOM готов:

Обратите внимание, что мы написали функцию «init» (строка 13), которая вызывается только тогда, когда страница полностью загружена (мы говорим «когда DOM готов»). Есть несколько способов сделать это. В этом примере мы использовали метод <body onload = «init ();»> в строке 29.

Хорошей практикой является наличие такой функции, поскольку мы не можем получить доступ к элементам страницы до полной загрузки страницы и до готовности DOM.

Другой способ — поместить код JavaScript в конец документа (между <script> … </ script> ), прямо перед </ body> . В этом случае, когда код JavaScript выполняется, DOM уже создан.

Основы canvas: принципы рисования

Подробнее об объекте context

Разберемся, как мы рисуем на холстах HTML5. Мы уже упоминали, что мы используем графический контекст для всех основных операций. Всякий раз, когда рисуется фигура, текст или изображение, учитываются текущие значения различных свойств графического контекста. Некоторые из них актуальны только для определенных видов фигур или режимов рисования, но вы должны знать, что всегда используются текущие значения этих свойств чертежа.

Позже мы увидим, что есть способы сохранить и восстановить весь этот набор значений, но сейчас давайте рассмотрим более подробно некоторые свойства и методы, с которыми мы уже сталкивались, и представим новые.

Подробнее о свойствах и методах объекта контекста

fillStyle — это свойство контекста, похожее на свойство CSS.

Его значение может быть одним из следующих:

    • цвет,
    • шаблон (текстура) или
    • градиент.

Значением по умолчанию является черный цвет. Любой вид рисунка в «режиме заливки» будет использовать значение этого свойства, чтобы определить, как отобразить «заполненную часть» чертежа: любой закрашенный прямоугольник, круг будет закрашен черным по умолчанию.

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

fillStyle и другие свойства контекста могут рассматриваться как «глобальные переменные» контекста.

Чтобы нарисовать каркасный прямоугольник, используйте ctx.strokeRect (x, y, width, height) , чтобы нарисовать заполненный прямоугольник, используйте ctx.fillRect (x, y, width, height);

fillRect (x, y, width, height) : вызов этого метода рисует заполненный прямоугольник.

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

Код

ctx . fillStyle = 'pink' ;
ctx . fillRect ( 10 , 10 , 200 , 200 );

даст такой результат:

strokeStyle — это свойство контекста, похожее на fillStyle , но на этот раз для указания того, как должен отображаться контур фигуры.

Возможные значения такие же, как для  свойства fillStyle: цвет, рисунок или градиент. Это свойство будет учитываться при рисовании каркасных форм.

strokeRect (x, y, width, height): как fillRect (…) , но вместо рисования закрашенного прямоугольника прямоугольник рисуется в режиме каркаса.

Например, код

ctx.strokeStyle='blue';
ctx.strokeRect(10,10,200,200);

даст такой результат:

clearRect (x, y, width, height) : вызов этого метода стирает указанный прямоугольник.

На самом деле он рисует его в цвете, называемом «прозрачный черный» (!), который соответствует начальному состоянию прямоугольника, как если бы не было никакого рисунка.

ctx . fillStyle = 'pink' ;
ctx . fillRect ( 10 , 10 , 200 , 200 );
ctx . clearRect ( 50 , 50 , 20 , 20 );

Чтобы установить ширину линии фигур каркаса, используйте свойство ctx.lineWidth . Пример 

ctx.lineWidth = 10;
ctx.strokeRect (0, 0, 100, 100);

нарисует прямоугольник 100×100 в режиме каркаса с шириной контура 10 пикселей.

Чтобы нарисовать текстовое сообщение, используйте ctx.strokeText (message, x, y) или ctx.fillText (message, x, y) для каркасного текста или заполненного текста соответственно.

Чтобы установить шрифт символа, используйте свойство ctx.font; значение является шрифтом в синтаксисе CSS, например:

ctx.font = 'italic 20pt Calibri';

Пример: нарисуем несколько фигур, которые имеют одинаковые цвета — они будут заполнены красным, с синим контуром. Также нарисуем текстовое сообщение с заданным шрифтом:

<!DOCTYPE html>
<html>
 <head>
   <title>Working with remote data</title>
  <meta charset="utf-8"/>
 <style>
     #myCanvas {
         border: 1px solid black;
     }
 </style>
 <script>
   var canvas, ctx;
 
   function init() {
     canvas = document.getElementById('myCanvas');
     ctx=canvas.getContext('2d');
     drawSomething();
   }
   function drawSomething() {
     ctx.lineWidth=5;
     ctx.fillStyle='red';
     ctx.strokeStyle='blue'
     ctx.font = 'italic 20pt Calibri';
     
     ctx.fillRect(10, 30, 70, 150);
     ctx.fillRect(110, 30, 70, 150);
     
     ctx.strokeRect(10, 30, 70, 150);
     ctx.strokeRect(110, 30, 70, 150);
     
     ctx.fillText("hello", 70, 22);    
   }
 </script>
 </head>
<body onload="init();">
    <canvas id="myCanvas" width="200" height="200">
            Your browser does not support the canvas tag.
    </canvas>
</body>
</html>

Результат:

Градиенты

Canvas также может заполнять фигуры градиентами вместо цветов. Вот линейный градиент:

var grad = ctx.createLinearGradient(0,0,200,0);
grad.addColorStop(0, "white");
grad.addColorStop(0.5, "red");
grad.addColorStop(1, "black");

ctx.fillStyle = grad;
ctx.fillRect(0,0,400,200);

Здесь важно отметить, что градиент окрашивается в системе координат, в которой нарисована фигура, а не во внутренних координатах фигуры. В этом примере фигура нарисована в 0,0. Если мы изменим форму на 100,100, градиент будет по-прежнему в начале экрана, поэтому будет отображаться меньше градиента, например:

var grad = ctx.createLinearGradient(0,0,200,0);
    grad.addColorStop(0, "white");
    grad.addColorStop(0.5, "red");
    grad.addColorStop(1, "black");
    
    ctx.fillStyle = grad;
    ctx.fillRect(100,100,400,200);

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

Геометрические преобразования: изменение системы координат, вращение, масштабирование

Пример:

ctx.translate(100, 100);
ctx.rotate(Math.PI/4);
ctx.scale(0.5, 0.5); 
drawRectangle(0, 0);

Строка 1 делает:

Строка 2 делает:

Строка 3 уменьшает прямоугольник в 2 раза (0.5, 0.5).

Строка 4 рисует прямоугольник в новой переведенной, повернутой, масштабированной системе координат.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 441

Популярные записи