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