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