Рисование на Canvas
JavaScript используется для рисования на холсте. Мы сделаем это шаг за шагом.
1. Найдите элемент Canvas
Чтобы найти элемент canvas, используйте метод HTML DOM: getElementById():
Рисование на Canvas
javascript
var canvas=document.getElementById("canvas");2. Создайте объект рисования
Используйте метод getContext() для получения контекста рисования, который предоставляет свойства и методы:
Рисование на Canvas
javascript
var ctx = canvas.getContext("2d");3. Рисование на элементе Canvas
Теперь вы можете рисовать на холсте. Свойство fillStyle может быть цветом CSS, узором или градиентом.
Рисование на Canvas
javascript
ctx.fillStyle = "#1c87c9";Вы также можете использовать метод fillRect(x, y, width, height) для рисования залитого прямоугольника на холсте. Параметры указывают координаты x и y верхнего левого угла, за которыми следуют ширина и высота:
Рисование на Canvas
javascript
ctx.fillRect(0, 0, 230, 130);Пример HTML-тега <canvas>:
Пример 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 #dddddd;">
The canvas tag is not supported by your browser.
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#1c87c9";
ctx.fillRect(0, 0, 230, 130)
</script>
</body>
</html>Practice
Какие элементы необходимы для рисования на HTML canvas?