![]() ![]() Extract the static vector shapes in .swf to JavaScript Canvas code of HTML5. Designed for HTML5 Canvas programmers, so the basic understanding of HTML5 Canvas is required. Important Notes: Only static vector shapes are supported so far, which means: 1. Any shape filled by bitmapped image is not supported yet.(You’ll get an empty image) 2. Morphing shapes are not supported yet. Features: 1. Generate the canvas drawing objects directly from the .swf file. 2. Preview the generated object drawing in Webkit. 3. WYSWYG authoring. 4. Export/Import the objects to/from .js Generated object sample: F2CCast = { F2CActor3 : { width : 95, height : 95, shapeOriginX : 0, shapeOriginY : 0, draw : function (ctx, anchorX, anchorY) { if (!anchorX) anchorX = 0; if (!anchorY) anchorY = 0; with(ctx) { /* ---- Canvas Drawing Start ---- */ save(); translate(this.shapeOriginX - anchorX, this.shapeOriginY - anchorY); beginPath(); moveTo(0.000, 0.000); quadraticCurveTo(47.750, 0.000, 95.500, 0.000); quadraticCurveTo(95.500, 47.750, 95.500, 95.500); quadraticCurveTo(47.750, 95.500, 0.000, 95.500); quadraticCurveTo(0.000, 47.750, 0.000, 0.000); fillStyle = "rgb(0, 0, 255)"; fill(); restore(); } /* ---- Canvas Drawing End ---- */ return this; } } /* End of F2CActor3 */ } /* End Of F2CCast */ Simple Usage: F2CCast['F2CActor3'].draw(context); Easy to be used in a scene graph engine to create the animations or games fully powered by HTML5 Canvas. Support: http://rintarou.dyndns.org/f2c/ Tutorial: http://rintarou.dyndns.org/download/f2c/F2CTutorial.html |