Довідники HTML5 canvas

Що таке canvas в HTML5?

HTML тег <canvas> необхідний для відображення різних JavaScript програм. За допомогою цього тегу створюється спеціальна область, куди можна вписувати ігри, програми, найпростіші фігури, написані JavaScript.

Також для цього тега варто використовувати атрибут id, завдяки якому ми зможемо знайти тег у JavaScript та вставити туди програму. Вимагає тег, що закриває </canvas>.

Атрибути:

width - Тут можна встановити ширину області. Спочатку вона дорівнює 150px.
height - тут можна встановити висоту області. Спочатку вона дорівнює 300px.

JavaScript код невеликої програми:

var canavas = document.getElementById("field");
var c = canavas.getContext("2d");
c.moveTo(0,0);
c.lineTo(300,70);
c.stroke();

// Створюємо градієнт
var grd = c.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"blue");

// Заповнюємо область градієнтом
c.fillStyle = grd;
c.fillRect(10,100,280,40);

HTML код найпростішої форми:

<canvas id="field" style="border: 2px dashed silver"></canvas>

Результат:

Коментарі