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:

  1. canto("canvas_id").  
  2.     moveTo(100, 100).  
  3.     lineTo(200, 200, 100, 200).  
  4.     closePath().  
  5.     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:

  1. canto("canvas_id").svgpath("M100 100 L200 200 100 200 Z").fill();  
a fenti alakban, vagy saját függvényeikkel:
  1. 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.