Увод у ХТМЛ Цанвас
У овом чланку ћемо видети структуру ХТМЛ Цанвас-а. Као што већ знате, ХТМЛ је означни језик. Да бисте посетиоцу представили информације, можете да напишете ХТМЛ са којим текстом треба да се прикаже на екрану и како ће бити приказан, тј. Величина, боја, оријентација фонта итд. Када је у питању додавање визуала на страницу, обавезни сте да повежете и уградите слике у страницу које се чувају одвојено од ХТМЛ датотеке на вашем хосту.
Али шта ако треба нешто да нацртате на страници?
Шта је ХТМЛ Цанвас?
ХТМЛ платно (користи се путем ознаке) је ХТМЛ елемент који се користи за цртање графике (линије, траке, графиконе итд.) На екрану корисничког рачунара у току. Елемент платна је само контејнер за информације, али цртање се врши преко ЈаваСцрипт-а. Подржавају га сви модерни веб претраживачи који подржавају ХТМЛ5 и могу да прикажу ЈаваСцрипт. Стварање ХТМЛ платна је врло једноставно и можете га додати на било коју ХТМЛ страницу путем следећег.
Синтакса:
Content here
Можете одредити величину платна путем атрибута ширине и висине, ИД елемента може се дефинисати и у ознаци што омогућава употребу ЦСС стилова на елементу платна. Следи пример како можете нацртати правоугаоник помоћу елемента Цанвас:
Шифра:
#examplecanvas(border:2px solid green;)
Излаз:
Примери цртежа ХТМЛ платна
Сада када сте видели како можете нацртати правоугаоник помоћу елемента платна, погледајмо неке друге објекте који се могу нацртати помоћу елемента на излазном екрану прегледача.
1. Цртање линије на страници
мовеТо (), строке () и линеТо () су методе које се могу користити за цртање правих линија на веб страници. Као што можете претпоставити, мовеТо () говори о положају цурсера у простору елемената, а линеТо () је метода која каже крајњу точку линије. Ударац () чини линију видљивом. Ево шифре за референцу:
Шифра:
Canvas Line Example
canvas (
border: 2px solid black;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
);
Излаз:
2. Цртање круга на ХТМЛ платну
За разлику од правоугаоника, у ЈаваСцрипт-у не постоји одређена метода за цртање круга. Уместо тога, можемо користити методу арц (), која се користи за цртање лукова за цртање круга на платну. Да бисте добили платно са кругом на њему, можете да користите следеће:
Синтакса:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Ево примера странице са кругом:
Шифра:
Canvas with a circle
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
);
Излаз:
3. Цртање текста у ХТМЛ платну
Текст се такође може цртати на ХТМЛ платну. Да бисте текст ставили на платно, можете тужити методу филлтект (). Следи пример ХТМЛ странице која садржи текст у елементу платна:
Шифра:
canvas with text inside the element
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
);
Излаз:
4. Цртање лука унутар ХТМЛ платна
Као што смо дискутовали са кругом, постоји метода која се назива лук () који се користи за цртање лукова унутар ХТМЛ Цанвас-а. Овде је синтакса методе где све што морате да урадите је да додате променљиву:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Следи ХТМЛ страница која има лук у елементу платна:
Шифра:
Arc inside an HTML Canvas
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
);
Излаз:
5. Цртање линеарног или кружног градијента у боји
Овом методом можете креиратиЛиенеарГрадиент () за цртање градијената по вашем избору унутар елемента платна. Овом методом морат ћете користити аддЦолорСтоп () за означавање градијентних боја.
Синтакса:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Ево странице која има линеарни градијент:
Шифра:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "red");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 300, 150);
Излаз:
Слично томе, метода цртања кружних градијената је цреатеРадиалГрадиент ().
Синтакса:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Шифра:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80, 50, 10, 100, 50, 90);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 150, 80);
Излаз:
Закључак
Сада када сте упознати са оним што је ХТМЛ платно и како се може користити на веб страницама, требало би да се осећате самоувереније у своје вештине веб дизајна. Иако се слике могу користити у неким случајевима, предност ХТМЛ платна је у томе што је скалабилан и лакши у погледу величине и снаге обраде.
Препоручени чланак
Ово је водич за ХТМЛ Цанвас. Овдје смо разговарали о томе шта је ХТМЛ Цанвас и његови примјери заједно с имплементацијом и излазом кода. Можете и да прођете кроз наше предложене чланке да бисте сазнали више -
- 16 најбољих атрибута ХТМЛ стила
- ХТМЛ вс ХТМЛ5 | Топ 9 упоређивања
- ВебГЛ вс Цанвас - главне разлике
- Топ 40 питања о ХТМЛ интервјуу
- Поставите боју позадине у ХТМЛ-у са примјером