Доброго времени суток дорогие друзья и давайте перейдем к делу!
Первое что вы должны понять что элемент canvas представляет собой холст внутри которого с помощью скриптов мы можем рисовать. Также мы имеем возможность создавать анимацию и многое другое.
Создадим холст:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Введение в canvas</title>
</head>
<body>
<canvas width="300" height="300" style="border:1px solid #000;"></canvas>
</body>
</html>размер холста 300x300, также здесь мы указали рамку для четкого определения его границ.
Элемент canvas мы создали теперь переходим к рисованию ,пишем код на js:
Первое, записываем элемент canvas в переменную для чего это нужно вы поймете далее:
var canvas = document.querySelector('canvas');Следует отметить что размеры холста мы можем указывать в коде, пример:
canvas.width = 300;
canvas.height = 300;здесь ,то нам и пригодилась запись элемента в переменную.
Затем c помощью метода getContext() получаем и записываем двухмерное изображение:
var canvas2D = canvas.getContext('2d');Все теперь мы можем непосредственно рисовать, давайте нарисуем квадрат:
canvas2D.strokeRect(100, 100, 100, 100);с помощью данной строчки кода мы нарисовали квадрат прямо по центру нашего холста.
Что мы здесь видим? Чтобы нарисовать квадрат мы использовали метод strokeRect, которому передали четыре параметра. Первые два параметра отвечают за координаты x, y левого верхнего угла, а остальные за ширину и высоту. Если мы хотим чтобы наш квадрат был с заливкой не вопрос для этого существует метод fillRect:
canvas2D.fillRect(100, 100, 100, 100);если мы после данной строчки кода укажем:
canvas2D.clearRect(100, 100, 50, 50);то у нас будет стерта одна четвертая часть квадрата. Метод clearRect() стирает часть изображения холста в виде прямоугольной области.
Давайте используем полученные знания и напишем небольшой скрипт.
var canvas = document.querySelector('canvas');
var canvas2D = canvas.getContext('2d');
function clearRect(x,y){
canvas2D.fillRect(100, 100, 100, 100);
canvas2D.clearRect(x, y, 50, 50);
if(x == 100 && y == 100){
x = 150;
}
else if(x == 150 && y == 100){
y = 150;
}
else if(x == 150 && y == 150){
x = 100;
}
else if(x == 100 && y == 150){
y = 100;
}
setTimeout(function(){
clearRect(x,y)
},100);
}
clearRect(100, 100);здесь ничего сложного нет, мы используем в связке методы fillRect() и clearRect() ,рекурсивно их вызывая в функции clearRect которой передаем два параметра координаты x и y. Эти координаты с каждым рекурсивным вызовом функции clearRect() меняются и передаются в метод clearRect() который стирает одну четвертую часть квадрата.
Мы можем также задать нашему квадрату заливку, прописав свойство fillStyle, к примеру:
canvas2D.fillStyle = 'green';Все элементы с заливкой после этой строчки будут отображаться зеленым цветом. Цвет можно указывать в таких форматах(#fff, rgb(0,0,0), rgba(0,0,0,1)):
canvas2D.fillStyle = 'rgba(0,0,0,0.5)';/*Черный полупрозрачный */Теперь рассмотрим как мы можем рисовать другие фигуры:
Допустим мы хотим нарисовать треугольник, сразу скажу что для треугольника уже нет никакого готового метода и поэтому нам придется рисовать его вручную.
Для этого мы воспользуемся линиями, но перед тем как рисовать линию мы должны обратится к методу beginPath() с помощью которого начинается отрисовка новой фигуры.
canvas2D.beginPath();после вызова данного метода у нас идет следующий код:
canvas2D.moveTo(50, 50);
canvas2D.lineTo(100, 100);
canvas2D.closePath();
canvas2D.stroke();где moveTo(x,y) - метод параметрами которого являются координаты (x,y) точки начала линии, а lineTo(x, y) ее конца.
Метод closePath() завершает отрисовку пытаясь замкнуть начальную и конечную точки( в нашем случае его использовать не обязательно),stroke() - метод обводит фигуру линиями, в нашем случае обязателен.
Можно также задать толщину линии с помощью свойства lineWidth, пример:
canvas2D.lineWidth = 5;или цвет благодаря strokeStyle
canvas2D.strokeStyle = 'gray';Все это конечно замечательно, но конечной нашей целью является треугольник поэтому смотрим дальше:
canvas2D.beginPath();
canvas2D.moveTo(50, 50);
canvas2D.lineTo(100, 100);
canvas2D.lineTo(50, 150);
canvas2D.closePath();
canvas2D.stroke();здесь мы добавили еще одну конечную точку в результате чего у нас получилось две прямых и при помощи метода closePath() начальная и конечная точки замкнулись образуя третью линию.И у нас получился треугольник, заметье если мы избавимся от метода closePath() у нас получится две прямые линии, теперь вы знаете что я добавил этот метод суда не зря.
Что мы можем сделать с нашим треугольником? Ну как вы наверное догадываетесь мы можем задать ему заливку.
Для этого достаточно заменить метод stroke() на fill() ,а как цвет выставлять мы сегодня уже рассматривали.
canvas2D.beginPath();
canvas2D.fillStyle = 'blue';
canvas2D.strokeStyle = 'red';
canvas2D.moveTo(50, 50);
canvas2D.lineTo(100, 100);
canvas2D.lineTo(50, 150);
canvas2D.closePath();
canvas2D.fill();
canvas2D.stroke();в коде мы задали нашему треугольнику синий фон и красную рамку.
С помощью данных приемов мы можем нарисовать практически любую фигуру состоящую из прямых линий.
Теперь рассмотрим рисование кругов и дуг, за рисование которых в canvas отвечает метод arc():
canvas2D.arc(150, 150, 100,0, 2*Math.PI, false);
canvas2D.stroke();в этом примере мы с вами нарисовали круг центром окружности которого является точка с координатами 150, 150 c радиусом 100, начальным углом 0П. и конечным 2П, если кто не помнит 1П = 180 градусов. Последний параметр указывает направление false - против часовой стрелки, true - по часовой.
canvas2D.arc(x, y, R,П0, П, false);отлично, давайте что нибудь нарисуем помимо круга:
function fun(x,flag){
canvas2D.beginPath();
canvas2D.arc(x, 100, 20,0, Math.PI, flag);
canvas2D.stroke();
if(x < canvas.width){
x +=40;
flag = flag == true ? false : true;
fun(x,flag);
}
}
fun(0,false);с помощью данного кода я нарисовал волну. Это еще далеко не все что можно реализовать с помощью canvas.
На этом дорогие друзья данная статья подошла к концу, скажу что мы сегодня рассмотрели самые основы canvas, в ближайшем будующем я обязательно буду развертывать эту тему.
Так как данная технология имеет большие преспективы в будующем.
А на этом все, надеюсь я смог до вас донести основную сутью и вы успешно разобрались.
Я желаю вам успехов и удачи! Пока!
