Erään ohjelmointiputkan käyttäjän neuvosta aloin tutkimaan html5 tutkimaan 2d canvasta. Näytti aluks todella hyvältä, mutta kun aloin lopulta itse devaamaan, niin vaikuttaa aika bugiselta ja beta vaiheessa olevalta värkkeeltä. ¨
Kerkesin testaamaan GIF animaatioita, jotka toimii pikkasen koodista riippuen mitä hämärimmillä tavoilla. Joskus GIF animaatiosta näkyy vain esimmäinen frame, joskus kaikki framet pyörii kerran pari ympäri ja joskus ne toimii niin kuin pitäisi ja framet vaihtuu lakkaamatta. Testasin sekä Chromella, että Firefoxilla.
Osaatteko analysoida, kannattaa 2d canvasia harkita peli alustaksi, jos joutuu pelkäämään erilaisia bugeja?
Tässä on äijä, joka juokee ympyrää. Juoksu kuitenkin lakkaa kesken kaiken ainkin mun chrome selaimessa. (Huom. clear screen ei ole koko alueella.)
http://www.verkkosovellukset.com/temp/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="3000" height="3000"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
var play = setInterval('Rotate()',50);
var i = 0;
var shipImg = new Image();
shipImg.src = '0.gif';
function Rotate() {
ctx.fillStyle = '#fff';
ctx.fillRect(0,0,200 + i,200);
ctx.save();
ctx.translate(50, 50);
ctx.rotate(i / 180 / Math.PI);
ctx.drawImage(shipImg, -20 + i, -20);
ctx.restore();
i += 3;
};
</script>
</body>
</html>Canvas toimii oikein hyvin ja bugittomasti, mutta pitää ymmärtää, mikä se on ja miten se toimii. Se ei ole mikään suora HTML:n jatke, eli siihen ei voi asetella mitään automaattisesti toimivia kuvia tai animaatioita. Canvas on piirtopinta, johon piirretään samalla tavalla kuin muissa kielissä ikkunaan. Haun mukaan olet aiemmin kokeillut C++:aa ja SDL-kirjastoa sekä Javaa, joten yritäpä muistaa niistä jotain. Animaatiota varten joudut siis itse mittaamaan aikaa ja piirtämään eri kuvia eri hetkillä.
Jos haluat vain asetella HTML-elementtejä sivulle, unohda canvas.
Okei, kiitos Metabolix, oikein selventävä selitys, etenkin toi, että se ei ole vain html:n jatke!
Osaatko muuten sanoa, että onko tuolle canvassille mitään framework elementtejä olemassa? Että kyllä tuosta tosiaan suoruidin noista animaatioden tekemisestä manuaalisesti jne, mutta jos joku on ne jo tehnyt, miksi tehdä kahteen kertaan.
EDIT: tai no miksi vaivata teitä, löytyihän tuolta netistä jo paljonkin vaihtoehtoja, täytyy vaan katella sieltä sopiva jatke JQuerylle...
JQueryllä ei ole mitään tekemistä canvas-elementin kanssa. JQuery manipuloi dom-puuta ja tarkemmin sanottuna vain html:n dom-puuta; se ei toimi esimerkiksi svg:n kanssa sinnepäinkään. Canvasille piirretyt "elementit" eivät näy dom:ssa lainkaan, joten niitä ei voi JQueryllä manipuloida.
Itse käytän KineticJS-kirjastoa 2d-piirtelyyn canvasille ja joskus svg:hen turvautuessa Raphaël-nimistä vastaavanlaista kirjastoa. Svg ja canvas ovat rajapintojensa osalta hyvin samankaltaisia mutta niillä on teknisesti melkolailla eroa.
Joskus voi olla mukavampaa käyttää canvasin sijaan svg:tä. Minulle tulee ensimmäisenä mieleen kaavioiden piirtely, johon en oikeastaan edes harkitsisi canvasia.
Kiitos infosta Alchemist! Löysin itseassiassa ihan tuoreen todella mielenkiintoisen 2d libraryn, joka käyttää grafiikkakortin kiihdytys ominaisuuksia hyväksi: pixi.js.
Olen ihan ällikällä lyöty, kun näin tämän demon:
http://www.goodboydigital.com/runpixierun/
Aihe on jo aika vanha, joten et voi enää vastata siihen.