Вы здесь: Главная > JavaScript > Холст Canvas

Холст Canvas

Опубликовано автором Просмотры: 9

Спецификация HTML5 привнесла в Веб множество новых и захватывающих технологий. Здесь мы подробно остановимся только на одной: на API Canvas. Он предназначен для рисования красивых, необычных вещей.

Canvas — это новый DOM API для рисования на двух- или трёхмерном холсте.  Далее рассматривается только 2D-версия, но 3D-технология называется WebGL, и с её помощью делаются невероятные вещи.

Первое, что нужно знать, это то, что canvas является новым элементом в спецификации HTML5. Чтобы начать рисовать на canvas, вы хватаетесь за него и извлекаете определённый контекст ─ либо 2d, либо webgl:

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

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

<canvas></canvas>

<script>
    var canvas = document.querySelector('canvas'),
        ctx = canvas.getContext('2d');
    ctx.fillRect(10, 10, 10, 10);
</script>

Попробуйте это на странице, чтобы увидеть маленький чёрный квадрат!

Функция getContext извлекла правильный контекст, который представляет собой объект, методы которого используются для рисования, заливки и общего изменения canvas. Выше мы использовали fillRect, который принимает положения x и y верхнего левого угла прямоугольника в качестве первых двух аргументов, а размеры ширины и высоты ─ в качестве последних двух.

Анимация

canvas работает немного как настоящий холст ─ пиксели рисуются и накладываются друг на друга, пока вы не сотрёте ─ очистите их.

Это означает, что если вы хотите анимировать что-то, движущееся по холсту, вам придётся многократно очищать холст (или его часть) и перерисовывать сцену.

В следующем примере мы анимируем квадрат, прыгающий вокруг canvas, размер которого автоматически изменяется, чтобы заполнить экран. loop ─ это бизнес-часть кода. Функция clearRect используется для очистки всего холста перед каждым кадром.

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

var resize = function () {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', resize);

window.addEventListener('load', function () {

  resize();

  var pos, vel;
  pos = {
    x: 10,
    y: 10
  };
  vel = {
    x: 1,
    y: 1
  };

  var loop = function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    pos.x += vel.x;
    pos.y += vel.y;
    if (pos.x < 5 || pos.x > canvas.width - 5) {
      vel.x *= -1;
    }
    if (pos.y < 5 || pos.y > canvas.height - 5) {
      vel.y *= -1;
    }
    ctx.fillRect(pos.x - 5, pos.y - 5, 10, 10);
  };

  setInterval(loop, 1000 / 60);
});

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

Страницы в тему:

Добавить комментарий