|
|
"Canvas" similar to flash's drawing API (Graphics class) but with different drawing procedure. Actually, it's 90% same as Quartz2D which invent before flash have drawing API.
for example, flash set the stroke style, fill style before draw. Quartz2D draw the path first, then stroke or fill it.
This project is making an adapter in Actionscript 3.0 to run canvas javascript. here's how it work:
code in html:
<Canvas id="myCanvas" width="100" height="100"/>
javascript:
canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();code in AS3:
var canvas:Canvas = new Canvas("myCanvas",100,100);
root.addChild(canvas);
var ctx = canvas.getContext("2d");
// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
