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);
