Рисование на холсте HTML
Рисовать на холсте с помощью JavaScript
Все рисование на холсте HTML должно выполняться с помощью JavaScript:
Пример
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Шаг 1: найдите элемент холста
Прежде всего, вы должны найти элемент <canvas>.
Это делается с помощью метода HTML DOM getElementById():
var canvas = document.getElementById("myCanvas");
Шаг 2: Создайте объект чертежа
Во-вторых, вам нужен объект рисования для холста.
getContext() — это встроенный объект HTML со свойствами и методами для рисования:
var ctx = canvas.getContext("2d");
Шаг 3: Рисуем на холсте
Наконец, вы можете рисовать на холсте.
Установите стиль заливки объекта рисования на красный цвет:
ctx.fillStyle = "#FF0000";
Свойство fillStyle может быть цветом CSS, градиентом или шаблоном. fillStyle по умолчанию — черный.
Метод fillRect( x,y,width,height ) рисует на холсте прямоугольник, заполненный стилем заливки:
ctx.fillRect(0, 0, 150, 75);