HTML5 Canvas. Paprasto kvadrato braižymas


canvas
elementas sukurtariausias animacijas iškarto naršyklėje nenaudojant jokių kitų objektų ir įrankių tokių kaip Flash, Silverlight, Java ir kitų.

Pagrindinis dalykas ką reikėtų žinoti kad canvas braižomas pasinaudojus JavaScript kuris padeda nubrėžti vieną ar kitą liniją ar objektą. Šiuo metu canvas braižomas tik 2D erdvėje, nors pačioje HTML5 specifikacijose rašoma kad ateityje turėtų atsirasti ir 3D erdvė.

Pirmiausia norint braižyti brėžinius canvas aplinkoje, turime nurodyti naują HTML elementą <canvas> Sukūrus canvas elementą jūs nepamatysite nieko. Šis elementas neturi jokių rėmelių ar išskirtinių kažkokių atributų kurie butų atvaizduojami puslapyje.

Tiesiog susikuriant naują canvas lementą, nurodykite jo dydį:

     <canvas width="300" height="225"></canvas>

Jūs galite turėti daugiau nei vieną canvas elementą puslapyje. Nėra apibrėžta kiek galima turėti šių elementų puslapyje.

Toliau canvas elementui reikia nurodyti unikalų ID. ID reikalingas tam kad nurodytume su kuriuo elementu mes dirbsime, ir kuriame elemente mes braižysime grafikus ar paveiksliukus.

    <canvas id="canvas" width="300" height="225"></canvas>

Pirmiausia prieš norėdami braižyti grafikus turite iškviesti canvas braižymą su JavaScript:

   var canvas = document.getElementById("canvas");

Aukščiau parodytu pavyzdžiu mes nustatome naują DOM elementą canvas pagal nurodytą mūsų HTML canvas elemento ID.

Paprastas braižymas

Taigi norėdami nubrėžti kvadratą naujai sukurtume canvas elemente, kaip minėjau aukščiau – turite nurodyti canvas elemento ID, po to nurodyti kad tai bus 2D grafikas. Vėliau jau galime braižyti tai ką norime.

Žemiau pateiktame paveikslėlyje parodyta kaip canvas elementas yra sudarytas ir kaip turi būti naudojamos koordinatės:

HTML Canvas Koordinatės

Canvas Koordinatės

Taigi kaip matyti viskas pradedama skaičiuoti nuo kairiojo viršutinio kampo.

Pabandykime nupiešti dabar paprastą kvadratą:

  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.fillRect(50, 25, 150, 100);

Pavyzdyje paskutinė eilutė būtent nupaišo paprastą juodą kvadratą. Pirmi 2 skaičiai nurodo nuo kurios vietos bus paišomas kvadratas, o kiti 2 nurodo kokio dydžio jis bus.

Žemiau pateikti būtent šio metodo trumpas aprašymas ir su šiiuo metodu susiję kiti metodai:

  • fillStyle – Šis metodas naudojama CSS spalvoms, permatomumui nurodyti ir panašiai. Šį metodą reikia apibrėžti prieš paišant paveiksliuką, nurodyti parametrai liks tol kol užkraus puslapį ir niekur nedings, nebent jūs patys išvalysite stilius. Pagal nutylėjimą šis metodas nustatytas taip kad būtų juoda spalva.
  • fillRect(x,y,ilgis,aukštis) – Šis metodas nupaišo kvadratą pagal nurodytus duomenis ir nurodytą stilių.
  • strokeRect(x,y,ilgis,aukštis) – Šis metodas panašus į nurodytą aukščiau, bet šis metodas neužpildo kvadrato vidaus.
  • clearRect(x, y, width, height) – Pagal nurodytas koordinates išvalomas laukas.

Mindaugas

IT specialistas, PHP programuotojas. Sritys: PHP, MySQL, JavaScript, Ajax, jQuery, Arduino, (x)HTML, CSS, XML

More Posts - Website

Žymos: , ,

1 komentaras

  1. Atgalinis pranešimas: HTML Canvas. Tekstas | Blog.MySQL.Lt

Parašykite komentarą

El. pašto adresas nebus skelbiamas.