Тег canvas в html 5.

Відео: Тег Canvas - робота в HTML5 і jаvascript

Думаю, майже кожен чув загадкове слово canvas, але далеко не всі знають, що це таке. У цій статті я постараюся ввести вас в курс справи, а, головне, розповім, навіщо ж потрібен canvas.

Canvas - це тег, який з`явився в html5 і дозволяє нам малювати растрові зображення прямо в браузері. Сам тег просто створює полотно, а малювати ми будемо за допомогою jаvascript.

 
id="Canvas"width="300"height="300"gt; 
 Ваш браузер не підтримує canvas

Ми задаємо йому якусь ширину, висоту, а також id, щоб потім нам було легше шукати його в jаvascript. Якщо браузер не підтримує даний тег (старі IE), То буде виведена напис між

Тепер ми можемо почати писати скрипт.

var tag = document.getElementById("Canvas"), 
ctx = tag.getContext("2d") -

Спочатку ми відбираємо наш canvas, а потім створюємо контекст, який нам допоможе малювати різні елементи. Малювати ми будемо в 2d, хоча, в майбутньому планується підтримка 3d.

малюємо прямокутники

Почнемо ми з того, що навчимося малювати прямокутники. Ось властивості і методи, які нам в цьому допоможуть:

Відео: HTML5 і Canvas на jаvascript: від простого до складного [GeekBrains]

strokeRect (x, y, width, height) - малює обрис прямокутника
fillRect (x, y, width, height) - малює заповнений прямокутник
clearRect (x, y, width, height) - стирає певну область
fillStyle - колір

Тепер подивимося на практиці

ctx.strokeRect(10,10,100,100) -// малюємо контур прямокутника з початковими координатами x = 10, y = 10, шириною і висотою 100px

Ось, що ми отримаємо в результаті

контур прямокутника

Тепер намалюємо зафарбований

ctx.fillStyle ="Blue"-// можна задавати усіма способами CSS (rgb, rgba, hsl і т.д.) ctx.fillRect (10,10,100,100) -

зафарбований прямокутник

Тепер давайте видалимо маленьку область всередині нашого закрашеного прямокутника

ctx.fillStyle ="Blue"- 
ctx.fillRect(10,10,100,100) - 
ctx.clearRect(47,45,30,30) -// видаляємо область в координатах починаючи з координати x = 47, y = 45 шириною і висотою 30px

прямокутник з діркою

Відео: Як зберегти графіку створену тегом HTML5 canvas в файл Save canvas Реалізація на MODx Revolution

Отримали ось такий прямокутник з діркою)

малюємо лінії

beginPath () - говоримо, що починаємо малювати
closePath () - говоримо, що закінчили малювати
stroke () - обводить фігуру
fill () - заливає фігуру кольором
moveTo (x, y) - переміщує курсор в зазначені координати
lineTo (x, y) - малює лінію з поточної позиції в зазначену в якості параметрів

ctx.beginPath() -// починаємо малювати 
ctx.fillStyle ="Blue"-// встановлюємо колір синім 
ctx.moveTo(10,10) -// ставимо курсор в точку (10,10) 
ctx.lineTo(100,30) -// ведемо лінію до точки (100,30) 
ctx.stroke() -// отрісовиваємих лінію

лінія

Ось таку лінію ми отрисовать. Тепер давайте намалюємо трикутник

ctx.beginPath() - 
ctx.fillStyle ="Red"-// міняємо колір на червоний 
ctx.moveTo(10,10) - 
ctx.lineTo(70,30) - 
ctx.lineTo(30,50) -// йдемо з попереднього значення координат (70,30) в нове (30,50) 
ctx.fill() -// заповнюємо простір між лініями

трикутник

Навіщо ж потрібен canvas?

Наприклад, за допомогою canvas`а, ми можемо динамічно намалювати графік, виходячи з якихось даних

Відео: Вебінар на тему "Семантика HTML5, створюємо змійку, використовуючи canvas"

графік

Або створювати круті ігри, які будуть виглядати краще, а працювати швидше, ніж ігри на flash. В інтернеті повно прикладів, обов`язково подивіться.

Насправді цю технологію можна багато де застосувати і, напевно, ви вже придумали, де могли б це використовувати, але те, що ми розглянули сьогодні в статті, лише крапля в морі. А якщо ви хочете дізнатися більше, то придбайте курс HTML5 та CSS3 з Нулі до Гуру, пройшовши який ви зможете сміливо створити свою гру і навіть більше.

Поділися в соціальних мережах:

Схожі