Введение в Canvas
Элемент HTML <canvas> используется для рисования графики с помощью скриптов. Это всего лишь контейнер для графики. Для рисования вам понадобится JavaScript.
Canvas имеет множество методов для рисования путей, кругов, прямоугольников, текста, а также для добавления изображений.
Canvas можно использовать для рисования цветного текста, с анимацией или без неё. Объекты Canvas также можно анимировать, то есть заставлять их двигаться.
TIP
На одной HTML-странице может находиться более одного элемента <canvas>.
Canvas представляет собой прямоугольную область, и по умолчанию у него нет рамки или содержимого.
Введение в Canvas
html
<canvas id="canvas" width="250" height="150"></canvas>DANGER
Всегда указывайте атрибут id, а также атрибуты width и height для задания размера canvas. Используйте атрибут style для добавления рамки.
Чтобы рисовать на canvas, сначала необходимо получить 2D-контекст рисования с помощью canvas.getContext('2d').
Пример тега HTML <canvas>:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px solid #1c87c9;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
</body>
</html>Пример тега HTML <canvas> для рисования круга:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="200" height="200" style="border:1px solid #dddddd;">
HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 60, 0, 2 * Math.PI);
ctx.strokeStyle = '#009299';
ctx.stroke();
</script>
</body>
</html>Пример тега HTML <canvas> для рисования текста:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="350" height="110" style="border:1px solid #dddddd;">
HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillStyle = '#262ac7';
ctx.fillText("Canvas Text", 55, 65);
</script>
</body>
</html>Пример тега HTML <canvas> для рисования линейного градиента:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="140" style="border:1px solid #dddddd;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "#359900");
grd.addColorStop(1, "#ffffff");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 250, 100);
</script>
</body>
</html>Пример тега HTML <canvas> для рисования линии:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="150" height="150" style="border:1px solid #cccccc;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(150, 150);
ctx.strokeStyle = '#86417d';
ctx.stroke();
</script>
</body>
</html>Пример тега HTML <canvas> для рисования изображения:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>
<h2>Original image</h2>
<img id="flower" src="https://images.unsplash.com/photo-1485431142439-206ba3a9383e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="500" height="379" />
</div>
<h2>Draw an image with canvas</h2>
<canvas id="exampleCanvas"></canvas>
<script>
const canvas = document.getElementById('exampleCanvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('flower');
image.addEventListener('load', e => {
ctx.drawImage(image, 80, 80, 350, 200, 10, 10, 150, 100);
});
</script>
</body>
</html>Пример тега HTML <canvas> для рисования радиального градиента:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="260" height="160" style="border:1px solid #cdcdcd;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(150, 75, 10, 115, 90, 150);
grd.addColorStop(0, "purple");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 220, 120);
</script>
</body>
</html>Практика
Каковы особенности и области применения HTML Canvas?