HTML5+-+Платно

// Претходно: // Форма атрибути // Следно: //SVG // Почеток: //HTML5 Туторијал

елементот се користи за цртање на графика, набрзина, на веб страна. Примерот покажува црвен правоаголник, правоаголник со градиент исполнување, правоаголник со повеќе бои и текст исто така во повеќе бои

Што е Платно ?
HTML5 елементот се користи за брзо цртање на графика со скриптирање (најчесто со JavaScript ). елементот е само содржател за графиката. За да нацртаме мора да користиме скрипта. Canvas има повеќе методи за цртање на патеки, кутии, кругови, текст и за додавање на слики.

Креирање на платно
Платното е правоаголна површина на HTML страната и е специфицирана со елементот. Забелешка: Обично, елементот нема граници и содржина.  Забелешка: Секогаш специфицирајте Id атрибут и width и height атрибут за да се дефинира големината на платното. Совет: Можеме да имаме повеќе елементи на една HTML страна. За да се додаде граница, се користи атрибутот style

__Пример__


Цртање на платното со JavaScript
Сите цртања на платното мора да бидат направени внатре во JavaScript.

__Пример__
var c=document.getElementById("myCanvas");  var ctx=c.getContext("2d");   ctx.fillStyle="#FF0000";   ctx.fillRect(0,0,150,75);

__ Објаснување на примерот __
Прво, се бара елементот //Var c=document.getElementById(“myCanvas”);// Потоа, се повикува методот getContext, мора да се помине низата “2d” за getContext методот //var ctx=c.getContext (“2d”);// Објектот getContext (“2d”) e вграден објект во HTML5, со многу опции и методи за цртање на патеки, кутии, кругови, текст, слики и сл. //ctx.fillStyle=”FF0000”;// //ctx.fillRect=(0,0,150,75);// Опцијата fillStle може да има CSS боја, градиент исполнување или некоја слика. fillStyle стандардно е #000000 (црна боја). Методот fillRect (x, y, ширина, висина) црта правоаголник исполнет со опциите зададени во fillStyle.

Координати на платното
Платното е дво-димензионална мрежа. Горниот лев ќош на платното има координати (0,0). Методот fillRect на правоаголник има параметри (0,0,150,75). Тоа значи: Започнува од горниот лев ќош (0,0) и се исцртува правоаголник со 150х75 пиксели.

Платно – Патеки
За да се исцрта линијата, треба да се користи еден од “инк” методите, како што е stroke.
 * За да се нацртаат прави линии на платното, се користат следните два методи:**
 * moveTo(x,y) – ја дефинира почетната точка на линијата
 * lineTo (x,y) – ја дефинира крајната точна на линијата

__Пример__
Дефинирај линија со почетна позиција (0,0), и крајна позиција (200,100). Потоа искористи го stroke методот за да се нацрта линијата.

Java Script : var c = document.getElementById("myCanvas");  var ctx = c.getContext("2d");   ctx.moveTo(0,0);   ctx.lineTo(200,100);   ctx.stroke; За да се исцрта круг на платното, се користат “инк” методите stroke или fill
 * За да се нацрта круг на платното, се користи следниот метод **
 * arc (x,y,r,start,stop)

__Пример__
Креирај круг со arc методот

JavaScript: var c = document.getElementById("myCanvas");  var ctx = c.getContext("2d");   ctx.beginPath;   ctx.arc(95,50,40,0,2*Math.PI);   ctx.stroke;

Платно – Текст

 * За да се нацрта текст на платното најважни опции и методи се:**
 * Font – го дефинира фонтот на текстот
 * fillText (text,x,y) – Црта “исполнет” текст на платното
 * strokeText(text,x,y) – Црта текст на платното (без исполнување)

Со користење нa fillText

__Пример__
Испиши исполнет текст со големина 30px и со користење на фонтот “Arial”: Java Script: var c = document.getElementById("myCanvas");  var ctx = c.getContext("2d");   ctx.font = "30px Arial";   ctx.fillText("Hello World",10,50); Испиши текст на платното со големина 30px и “Аrial” фонт, без исполнување ЈаvaScript: var c = document.getElementById("myCanvas");  var ctx = c.getContext("2d");   ctx.font = "30px Arial";   ctx.strokeText("Hello World",10,50);
 * Со користење на strokeText **

Платно – Градиенти
Градиентите можат да се користат за исполнување на правоаголници, кругови, линии, текст и слично. Фигурите исцртани на платното не се ограничени само со една боја. Постојат два различни видови на градиенти: Кога ќе решиме дека објектот ќе има градиент исполнување, треба да одбереме две или повеќе бои. Методот addColorStop одредува кога бојата треба да запре и нејзината позиција во градиентот. Позицијата на градиентот може да биде меѓу 0 и 1. За да се користи градиентот, опцијата fillStyle и strokeStyle се сетира на градиент и потоа се црта правоаголникот, кругот, текстот или линијата.
 * createLinearGradient(x,y,x1,y1) – Креира линеарен градиент
 * createRadialGradient(x,y,r,x1,y1,r1) – Креира кружен градиент

__Пример__
Со користење на createLinearCradient Креирај линеарен градиент. Исполни го правоаголникот со тој градиент. ЈavaScript: 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);

__ Пример __
Со користење на createRadialGradient Креирај кружен градиент. Исполни го правоаголникот со градиентот. ЈаvaScript 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);

Платно - Слики
За да се нацрта слика на платно, се користи следниот метод drawImage(image,x,y)

__Пример__
Image to use: Html код од сликата што ќе ја користиме var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);

// Претходно: // Форма атрибути // Следно: // SVG // Почеток: // HTML5 Туторијал

 Градиент- прелевање