HTML5. Урок #12. Холст

by @html_books
HTML5. Урок #12. Холст

Элемент <canvas>

С помощью элемента canvas в HTML рисуется графика всех типов сложности: от простых линий до сложных графических объектов.

Элемент canvas оформляется следующим образом:

<canvas id="canvas1" width="200" height="100"></canvas>

Элемент <canvas> является только контейнером для графики. Чтобы рисовать графику, используются сценарии (как правило, JavaScript).


Элемент <canvas> должен иметь атрибут id для привязки в JavaScript:

<html>
   <head>
   <script>
   var can = document.getElementById("canvas1"); 
   var ctx = can.getContext("2d");
   </script>
   </head>
   <body>
      <canvas id="canvas1" 
   width="400" height="300"></canvas> 
   </body>
</html>

С помощью метода getContext() получаем контекст рисования на холсте.

Вам нужно познакомиться с азами JavaScript, чтобы понимать принцип работы с холстом в HTML5.







Координаты холста

Холст в HTML представляет собой двумерную сетку. В верхнем левом углу холста находится начало его координат: (0,0). По оси X значения возрастают к правому краю холста, а по оси Y - к нижнему краю холста.







Рисуем фигуры

Посредством метода fillRect(x, y, w, h) рисуется «залитый» прямоугольник, при этом w - его ширина и h - его высота. По умолчанию используется чёрный цвет заливки. Здесь на холсте в позиции (20, 20) будет нарисован чёрный прямоугольник размером 100х100 пикселей:

var c=document.getElementById("canvas1");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);

Свойство fillStyle задаст цвет, градиент или узор заливки рисунка. С помощью этого свойства Вы можете нарисовать, например, зелёный квадрат.

var canvas=document.getElementById("canvas1");
var ctx=canvas.getContext("2d");
ctx.fillStyle ="rgba(0, 200, 0, 1)";
ctx.fillRect (36, 10, 22, 22);

На холсте в HTML можно рисовать с помощью и других методов: Нарисовать линию moveTo(x,y) - задаёт стартовую точку линии lineTo(x,y) - задаёт конечную точку линии Нарисовать круг beginPath() - начинает рисовать arc(x,y,r,start,stop) - задаёт параметры круга stroke() - заканчивает рисовать Градиенты createLinearGradient(х, у, x1, y1) - создаёт объект линейного градиента createRadialGradient(x,y,r,x1,y1,r1) - создаёт объект кругового градиента Нарисовать текст на холсте Font - задаёт параметры шрифта fillText(text,x,y) - рисует «залитый» текст на холсте strokeText(text,x,y) - рисует текст на холсте без заливки

Существует много других методов рисования фигур и иллюстраций на холсте.

June 18, 2018
by @html_books