HTML5 CANVAS шаг за шагом

VeTaL_UA · 17.08.2012, 17:09

Доброго времени суток!

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.

--===Предварительная «настройка» нашего холста===--

--===Прямоугольники===--

Самой элементарной фигурой которую можно рисовать является прямоугольник. Предусмотрено три функции для отрисовки прямоугольников.
strokeRect(x, y, ширина, высота) : Рисует прямоугольник
fillRect(x, y, ширина, высота) : Рисует закрашенный прямоугольник
clearRect(x, y, ширина, высота) : Очищает область на холсте размер с прямоугольник заданного размера

Пример иллюстрирующий работу этих функций:

Код:

<html>
<head>
   <title>rectExample</title>
</head>
<body>
   <canvas id='example'>Обновите браузер</canvas>
   < script >
   var example = document.getElementById("example");
   var ctx = example.getContext('2d');
   example.width  = 640;
   example.height = 480;
   ctx.strokeRect(15, 15, 266, 266);
   ctx.strokeRect(18, 18, 260, 260);
   ctx.fillRect(20, 20, 256, 256);
   for (i=0; i<8; i+=2)
     for (j=0; j<8; j+=2) {
       ctx.clearRect(20+i*32, 20+j*32, 32, 32);
       ctx.clearRect(20+(i+1)*32, 20+(j+1)*32, 32, 32);
     }
   </script>
</body>
</html>

А теперь краткий построчный разбор:
в строках 10 и 11 мы изменили размер холста — чтоб бы задуманное нами изображение полностью отобразилось,
в строках 12 и 13 мы нарисовали два не закрашенных прямоугольника которые будут символизировать своеобразную рамку нашей «шахматной доски»,
в строке 14 отрисовываем закрашенный прямоугольник размеры которого бы позволил вместить в себе 64 квадрата с шириной стороны 32 пикселя,
в строках с 15 по 19 у нас работает два цикла которые очищают на чёрном прямоугольнике квадратные области в таком порядке что бы в итоге полученное изображение было похоже на шахматную доску.

--===Линии и дуги===--

Рисование фигур составленных из линий выполняется последовательно в несколько шагов:
beginPath()
closePath()
stroke()
fill()

beginPath используется что бы «начать» серию действий описывающих отрисовку фигуры. Каждый новый вызов этого метода сбрасывает все действия предыдущего и начинает «рисовать» занова.
closePath является не обязательным действием и по сути оно пытается завершить рисование проведя линию от текущей позиции к позиции с которой начали рисовать.
Завершающий шаг это вызовом метода stroke или fill. Собственно первый обводит фигуру линиями, а второй заливает фигуру сплошным цветом.
Те кто когда-то на школьных 486х в былые годы рисовал в бейсике домик, забор и деревце по задумке учителя тот сразу поймёт часть ниже. Итак, существуют такие методы как,
moveTo(x, y) : перемещает "курсор" в позицию x, y и делает её текущей
lineTo(x, y) : ведёт линию из текущей позиции в указанную, и делает в последствии указанную текущей
arc(x, y, radius, startAngle, endAngle, anticlockwise) рисование дуги, где x и y центр окружности, далее начальный и конечный угол, последний параметр указывает направление

Пример ниже показывает действие всего описанного выше:

Код:

<html>
<head>
   <title>pathExample</title>
</head>
<body>
   <canvas id='example'>Обновите браузер</canvas>
   < script >
     var example = document.getElementById("example");
     var ctx = example.getContext('2d');
     example.height = 480;
     example.width = 640;
     ctx.beginPath();
     ctx.arc(80, 100, 56, 3/4*Math.PI, 1/4*Math.PI, true);
     ctx.fill();
     ctx.moveTo(40, 140);
     ctx.lineTo(20, 40);
     ctx.lineTo(60, 100);
     ctx.lineTo(80, 20);
     ctx.lineTo(100, 100);
     ctx.lineTo(140, 40);
     ctx.lineTo(120, 140);
     ctx.stroke();
   </script>
</body>
</html>

В строке 14 заливается цветом дуга, в строке 22 обводится контур нашей короны.

--===Кривые Бернштейна-Безье===--

--===Добавим цвета===--

Спасибо за внимание!

Копипасты