canvas
Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.
Элемент <сanvas> позволяет рисовать на веб-страницах произвольные фигуры с помощью JavaScript
<canvas id='draw' width='300' height='200'>Вы видите это сообщение, потому что Ваш браузер не поддерживает canvas.</canvas>
Чтобы рисовать на холсте, нужно написать определенный объем кода JavaScript. Эта задача состоит из двух этапов. Первым делом наш сценарий должен получить объект холста, для чего используется метод document.getElementById. Затем надо получить двумерный контекст рисования, для чего применяется метод getContext():
var canvas = document.getElementById("drawingC anvas"); var context = canvas.getContext("2d");
Координаты холста
Холст это двумерная сетка. Координата 0,0 находится в левом верхнем углу холста. Вдоль оси X значения растут к правому краю холста. По оси Y значения растут к нижнему краю холста.
Прямые линии
Самой простой фигурой, которую можно нарисовать на холсте, будет прямая линия. Для этого нужно выполнить три действия с контекстом. Сперва надо указать начальную точку линии с помощью метода moveTo(). Потом с помощью метода lineTo() задать конечную точку линии. Наконец, метод stroke() собственно рисует линию:
// JS
context.moveTo(10,10);
context.lineTo(400,40); context.stroke();
Свойство lineWidth определяет толщину линии в пикселах. Например, следующая строка кода устанавливает толщину линии в 10 пикселов:
// JS
context.lineWidth = 10;
Свойство strokeStyle определяет цвет линий. Значение этого свойства может быть в виде названия цвета HTML, кода цвета HTML или же CSS-функции rgb(), которая позволяет создать цвет из его красной, зеленой и синей составляющей:
// JS
context.strokeStyle = "rgb(16,155,252)";
Cвойство lineCap указывает тип концов линии. По умолчанию этому свойству присваивается значение butt (что придает концам линии прямоугольную форму), но можно также присвоить значение round, делая концы округлыми, и squre. Последнее значение также делает концы линии прямоугольными, как и значение butt, но удлиняет ее на каждом конце на половину значения толщины линии. Таким же образом линия удлиняется и при форме концов round.
<html><head>
<style> canvas { border: 1px dashed black; } </style> <script>
window.onload = function() {
var canvas = document.getElementById("drawingCanvas"); var context = canvas.getContext("2d");
//Толщина и цвет для всех линий context.lineWidth = 20; context.strokeStyle = "rgb(16,155,252)";
//Линия с концами типа butt context.moveTo(10,50); context.lineTo(400,50); context.stroke();
//Линия с концами типа round context.beginPath();
context.moveTo(10,120);
context.lineTo(400,120); context.lineCap = "round"; context.stroke();
// Линия с концами типа square context.beginPath(); context.moveTo(10,190); context.lineTo(400,190); context.lineCap = "square"; context.stroke();
}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="300"></canvas> </body>
</html>