НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Графіка. Уроки W3Schools українською для початківців

En

HTML Canvas Малювання


Малювати в Canvas за допомогою JavaScript

Усі малюнки в HTML Canvas мають виконуватися за допомогою JavaScript:

Приклад

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Спробуйте самі »

Крок 1. Знайдіть елемент Canvas

Перш за все, ви повинні знайти елемент <canvas>.

Це робиться за допомогою методу HTML DOM getElementById():

var canvas = document.getElementById("myCanvas");

Крок 2: Створіть об’єкт малювання

По-друге, вам потрібен об’єкт малювання для Canvas.

getContext() — це вбудований об’єкт HTML із властивостями та методами для малювання:

var ctx = canvas.getContext("2d");

Крок 3. Малюйте в Canvas

Нарешті ви можете малювати в Canvas.

Установіть червоний колір для стилю заливки об’єкта малювання:

ctx.fillStyle = "#FF0000";

Властивість fillStyle може бути кольором CSS, градієнтом або візерунком. Типовим стилем fillStyle є чорний.

Метод fillRect(x,y,width,height) малює прямокутник, заповнений стилем заливки, в Canvas:

ctx.fillRect(0, 0, 150, 75);