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