Helló!
Lássuk hogyan is tudunk mozgásra bírni dolgokat a képernyőn html5-öt és js-et használva.
Hozzunk létre egy új Javascript blank app projektet és nyissuk meg a default.html fájlt, majd hozzunk létre benne két gombot “Move” (ennek hatására elindul az animációnk) és “Stop” (ez pedig megállítja) névvel és hozzuk létre a canvasunkat is.
<button onclick="m.m1()">Move</button>
<button onclick="m.m2()">Stop</button>
<canvas id="canvas"></canvas>
(az onclickről később)
Ha ezzel megvagyunk jöhet is a default.js. Nyissuk meg a fájlt majd hozzunk létre néhány szükséges változót
var canvas, context; // canvas inicializalasahoz kell
var a = 250; // a kor kozeppontjanak y koordinataja
var b = 1; // jobbra vagy balra mozogjon a kor
var x = false; // van mozgas vagy nincs
Ezután hozzuk létre az “initialize()” függvényünket amiben létrehozzuk a canvas-t és az animációkat amit a következő képpen tudunk megtenni:
window.onload = initialize;
function initialize() {
canvas = document.getElementById("canvas");
canvas.width = window.innerWidth; //canvas szelessege kepernyo szeles
canvas.height = window.innerHeight; //canvas szelessege kepernyo magas
context = canvas.getContext("2d");
//ketfele keppen hozhatunk letre animaciot
requestAnimationFrame(move); // canvas ujrarajzolasa 1
setInterval(function () { redraw()}, 6); // canvas ujrarajzolasa 2
}
Akkor most irjuk meg a move() es a redraw() fuggvenyeket, hogy működjön is.
function redraw() {
context.beginPath();
context.fillStyle = "blue";
if (a > 500) //ha a kor y koordinátája nagyobb mint 500 akkor irányváltás
b *= -1;
if (a < 250) //ha a kor y koordinátája kisebb mint 250 akkor irányváltás
b *= -1;
context.arc(a, 350, 20, 0, Math.PI * 2, true); // kezdo kor kirajzolasa
//ha rákattintunk a Move gombra x=true
if(x)
//mozgatás jobbra balra y koord. szerint 250 és 500 kozott
context.arc(a += b, 350, 20, 0, Math.PI * 2, true);
context.fill();
}
Most nézzük a move() függvényt(kis különbséggel ugyan az mint az előbb):
function move() {
canvas.width = canvas.width; // képernyő törlése
context.beginPath();
context.fillStyle = "blue";
if (a > 500)
b *= -1;
if (a < 250)
b *= -1;
context.arc(a, 250, 20, 0, Math.PI * 2, true); // kezdo kor kirajzolasa
if (x)
context.arc(a += b, 250, 20, 0, Math.PI * 2, true); // mozgatas
context.fill();
requestAnimationFrame(move);
}
Már csak a gombok kezelése van hátra. Elöszőr is írjuk meg a két (on(), off()) fügvényünket ami nem lesz túl bonyolult mindössze az “x” változót állítja “true”-ra vagy “false”-ra
function on() {
x = true;
function off() {
x = false;
}
Ha ez is megvan már csak egy aprócska lépés van hátra mégpedig, hogy létrehozzunk egy névteret amin keresztül elérjük ezeket a függvényeket a html fájlunkból:
WinJS.Namespace.define("m", { m1: on, m2:off}); // namespace a gombokhoz
Ezután az ‘az oncllick’-nek már átadható m1() ill. m2() függvény ahogy ezt az elején csináltuk.
A gombok középre helyezéséhez a default.css-be írjuk be a következőket:
body {
text-align:center;
background-color:coral;
}
Ha mindennel megvagyunk futtasuk a projektet és próbáljuk ki.
A forrás innen letölthető: CanvasDemo2
Üdv: Balázs
