Учим HTML5 Canvas за 30 минут
Сегодня будет легкий, но классный урок. Мы познакомимся с HTML 5 Canvas.
С помощью Canvas Вы сможете создавать интересные эффекты на странице, разрабатывать игры и полезные графические инструменты. При этом всем работа с HTML 5 Canvas осуществляется посредством языка программирования JavaScript, но там все очень просто. Его поддержка радует во всех смыслах, так как Canvas поддерживается практически везде, даже на старых версиях Internet Explorer.
Соответственно мы разберем работу с самим тегом Canvas, поговорим о его особенностях и нарисуем простейшие графические примитивы, такие как квадрат, круг, треугольник. Затем с полученными знаниями разработаем простенькую программу, позволяющую рисовать, а затем на автомате воспроизводить рисунок. Такая штука раньше была очень популярна на Facebook.
Поехали!
Для начала создадим обычную структуру HTML документа и разместим тег Canvas. Напишем между тегами текст, который будет отображаться, если браузер не поддерживает Canvas. Также имеет смысл дать идентификатор id=”canvas”, чтобы определить его из множества других, если таковые будут. Пропишем нашему body нулевое значение margin, чтобы не было отступов.
Теперь есть смысл начинать писать наш код.
Первое, что нужно сделать в скрипте это подгрузить сам Canvas.
canv = document.getElementById('canvas');
Далее создадим переменную, которая вообще-то называется context, но стандартно пишут ctx. Она будет хранить в себе контекст этого загруженного canvas-a. Загружается он легко, просто обращаетесь к этой переменной canv и вызываете метод getContext. Первым аргументом указываете, какой хотите контекст. Их стандартно 4, но чаще всего используется двумерный контекст, то есть 2d.
ctx = canv.getContext('2d');
Пропишем высоту и ширину Canvas так, чтобы он отображался на всю страницу. По умолчанию его параметры 300x150px. Чтобы не появлялись полосы прокрутки необходимо прописать тегу Canvas значение display: block.
canv.width = window.innerWidth; canv.height = window.innerHeight;
Приступим к рисованию прямоугольника!
Первое, что мы сделаем - нарисуем прямоугольник. Для этого нужно обратиться к нашему контекту, то есть к переменной ctx и указать свойство fillStyle, хотя можно этого не делать и тогда цвет у прямоугольника будет черный.
ctx.fillStyle = 'magenta';
Далее вызываем метод fillRect, который отвечает за то, чтобы нарисовать непосредственно сам квадрат. Он принимает 4 аргумента: позиции по оси X и Y, на который будет начинаться наш будущий прямоугольник.
ctx.fillRect(50,50,300,200);
После того как Вы сохраните документ и обновите в браузере страницу, то увидите долгожданный прямоугольник.
При этом мы можем его очень просто анимировать. Для этого создаем простую переменную, например, x, которая будет хранить расположение прямоугольника по оси X.
var x = 50; ctx.fillRect(x,50,300,200);
Теперь создаем простейший таймер, который каждых 10 миллисекунд будет перерисовывать этот прямоугольник и увеличивать его позицию по оси X. В начале каждого цикла (таймера, повторения) закрашиваем весь холст белым цветом.
setInterval(function(){
ctx.fillStyle = 'white';
ctx.fillRect(0,0,canv.width,canv.height);
ctx.fillStyle = 'magenta';
ctx.fillRect(x++,50,300,200);
},10);
Получаем вот такой код и анимацию
var
canv = document.getElementById('canvas');
ctx = canv.getContext('2d');
canv.width = window.innerWidth;
canv.height = window.innerHeight;
var x = 50;
ctx.fillStyle = 'magenta';
ctx.fillRect(x,50,300,200);
setInterval(function(){
ctx.fillStyle = 'white';
ctx.fillRect(0,0,canv.width,canv.height);
ctx.fillStyle = 'magenta';
ctx.fillRect(x++,50,300,200);
},10);
Вообще-то делать анимацию в Canvas через setInterval нет особого смысла, это делается через requestAnimationFrame.
Как нарисовать прямоугольник, но не заполнять его? Чтобы у него были только border-ы. Для этого есть метод strokeRect, который принимает точно те же аргументы, что и fillRect
var x = 50; ctx.fillStyle = 'magenta'; ctx.strokeRect(x,50,300,200);
На выходе Вы получается вот это:
Можно обратить внимание, что цвет border-a прямоугольника не magenta. Так происходит, потому что он вызывается не через fill, а через stroke.
Можно изменить цвет обводки прямоугольника, а заодно и его ширину следующим образом:
var x = 50; ctx.fillStyle = 'magenta'; ctx.strokeStyle = 'red'; ctx.lineWidth = 10; ctx.strokeRect(x,50,300,200);
Учимся делать круг!
Круг на Canvas делается также очень просто. Для этого есть метод arc. Он принимает 6 параметров: 1 - позиция по оси x, 2 - позиция по оси y, 3 - радиус круга, 4 - начало угла (start angle), 5 - конец угла (end angle), 6 – рисовать круг по часовой стрелке или против. Последний параметр не обязательный. Start angle начинается справа, так как он задается в медианах и когда Вы указываете end angle, то указываете как далеко он пойдет.
ctx.fillStyle = 'magenta'; ctx.arc(canv.width / 2, canv.height / 2, 100, 0, Math.PI); ctx.fill(); //нужен для того, чтобы Вы заполнили то, что разметили в arc
Получем ровный полукруг
Комментарии ()