ugrás a tartalomhoz

Ecset a vászonhoz

Joó Ádám · 2010. Júl. 30. (P), 15.39

David Flanagan, az O’Reilly szerzője nemrég tette közzé a meglehetősen nehézkes Canvas 2D API-t kiváltó könyvtárát, a Canto.js-t.

A Canto egy saját kontextust definiál, melyen továbbra is elérhetők a vászon API függvényei (így a meglévő kódunk működőképes marad), azonban a hívások láncolhatók:

canto("canvas_id").
    moveTo(100, 100).
    lineTo(200, 200, 100, 200).
    closePath().
    stroke({lineWidth: 15, strokeStyle: "red"});

A fenti kódrészletben két kiegészítés is látszik: egyszerre akár több szakaszt is megrajzolhatunk, a valós rajzolást végző függvényeknek pedig megadhatjuk a rajzolandó vonal tulajdonságait.

A további újdonságok közt szerepel a relatív koordináták használatának lehetősége, egy teknőcgrafikus könyvtár, illetve a görbék SVG-ből ismert kompakt formában történő megadása:

canto("canvas_id").svgpath("M100 100 L200 200 100 200 Z").fill();
a fenti alakban, vagy saját függvényeikkel: 
canto("canvas_id").M(100, 100).L(200, 200, 100, 200).Z().stroke();

A könyvtár elérhető a Google Code-on MIT licenc alatt, dokumentáció a forráskód elején.

 ■