Sziasztok!
Most megnézzük hogyan is lehet rajzolni a canvasra html5-ben javascript segítségével.
Először is hozzunk létre egy új projektet a szokásos módon majd nyissuk meg a default.html fájlt és adjuk hozzá a következő sort a body-hoz:
<canvas id=”canvas”></canvas>
Ha ezzel megvagyunk a default.js fájlra lesz szükségünk amihez adjuk hozzá az initialize() függvényt az „app.oncheckpoint = function (args) {“ sor elé:
function initialize(){
}
A függvényben akkor inicializáljuk is a canvasunkat:
canvas = document.getElementById(“canvas”);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context = canvas.getContext(“2d”);
Ezzel letre is hoztunk egy képernyő mértű rajzterületet amire rajzolhatunk különböző dolgokat pl: vonalat téglalalpot…
Néhány példa:
Vonal rajzlása:
context.strokeStyle = ‘#0f0’; // a vonal színe
context.moveTo(20, 20); //innen indul a vonal rajzolása
context.lineTo(100, 30); //ide húzzuk a vonalat
context.lineWidth = 3; //vonalvastagság
context.stroke(); //végül a rajzolás
kitöltött téglalap rajzolása:
context.fillStyle = ‘#00f’;
context.fillRect(600, 50, 100, 200);
context.lineWidth = 5;
context.stroke();
görbe rajzolása:
//gorbe rajzolasa
context.moveTo(20, 50);
context.quadraticCurveTo(190, 700, 400, 50);
context.lineWidth = 1;
context.stroke();
Végül ahhoz, hogy múködjön is a még egy dologra less szükségünk mégpedig meg kell hívnunk az inicialize() függvényt ezt pedig a következőképp tehetjük meg:
document.addEventListener(“DOMContentLoaded”, initialize, false);
ezt a sort kell betennünk mondjuk az “app.start();” sor elé.
Ha meindennel megvagyunk futtasuk a programunkat és ha minden jól megy akkor a következőnek kell megjelennie elöttünk:
a forrásfájl letölthető innen: CanvasDemo1
Üdv.: Balázs
