HTML5. Canvas

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Ваш браузер не підтримує елемент <canvas>.

HTML елемент <canvas> (с анг. canvas - полотно) використовується для малювання графіки на веб-сторінці.

Графічний об'єкт ліворуч створюється за допомогою <canvas>. Він показує чотири елементи: червоний прямокутник, градієнтний прямокутник, багатобарвний прямокутник і багатобарвний текст.


Що таке HTML Canvas?

HTML елемент <canvas> використовується для малювання графіки на льоту за допомогою JavaScript.

Елемент <canvas> є лише контейнером для графіки. Ви повинні використовувати JavaScript, щоб насправді малювати графіку.

Canvas має декілька методів для малювання доріжок, полів, кіл, тексту та додавання зображень.


Підтримка браузерами

Цифри в таблиці визначають першу версію браузера, яка повністю підтримує елемент <canvas>.

Element
<canvas> 4.0 9.0 2.0 3.1 9.0

Canvas Приклади

Canvas (полотно) - це прямокутна область на HTML сторінці. За замовчуванням полотно не має кордону та вмісту.

Розмітка виглядає так:

<canvas id="myCanvas" width="200" height="100"></canvas>

Примітка: Завжди вказуйте атрибут id (на який посилається скрипт), атрибути width (ширина) та height (висота) для визначення розміру полотна. Щоб додати кордон, скористайтеся атрибутом style.

Ось приклад основного, порожнього полотна:

Ваш веб-браузер не підтримує елемент canvas.

Приклад:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
Спробуйте самі »

Намалювати лінію

Ваш веб-браузер не підтримує елемент canvas.

Приклад:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Спробуйте самі »

Намалювати коло

Ваш веб-браузер не підтримує елемент canvas.

Приклад:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Спробуйте самі »

Намалювати текст

Ваш веб-браузер не підтримує елемент canvas.

Приклад:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Спробуйте самі »

Обведений текст

Ваш веб-браузер не підтримує елемент canvas.

Приклад:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Спробуйте самі »

Намалювати лінійний градієнт

Ваш веб-браузер не підтримує елемент canvas.

Приклад:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Спробуйте самі »

Намалювати круговий градієнт

Ваш веб-браузер не підтримує елемент canvas.

Приклад:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Спробуйте самі »

Намалювати зображення

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
Спробуйте самі »

HTML Canvas підручник

Щоб дізнатись більше про HTML <canvas>, відвідайте наш повний посібник по HTML Canvas.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.