Mikel
I'm trying to write a simple web application for iPhone/iPod touch.
The application have a dynamic grid of color.. like color picker.
My first implement is using JavaScript with DIVs but the performance is too slow.
That makes me learn how to draw the grid in "Canvas".
"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.
To reuse my drawing code, I make an adapter for it in AS3.
here's how it work:
code in html:
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 flash:
var ctx:Canvas = 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();
here's the examples in MDC:
http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
demo of the canvas port in flash:
http://www.gamemeal.com/canvas/
the source will release after I finish the implement of transform matrix and arcTo.
In the meanwhile, I found some issue in flash cannot 100% compatible with canvas.
* fill – flash use even odd fill, canvas using non-zero winding rule
* autoClosePath – flash will close path if 2 point is too close.
* antiAlias – it's slightly different from canvas. Flash make verticle and horizontal line sharp by shifting 0.5px.
and,
gecko's canvas draw slightly different from safari's canvas.
* default color of gecko is "#000000" and safari is "Black"
* lineTo
eg:
context.beginPath();
context.lineTo(100,200);
context.lineTo(200,0);
context.strokeStyle = "#FFFFFF"
context.stroke();
gecko draw a line from 100,200 to 200,0
safari draw nothing.
* arcTo
gecko seems not implement arcTo properly and I'm hard to find a example using arcTo in MDC
here's illustrate the parameters of arcTo(x1,y1,x2,y2,radius);
If you want to learn more about quartz2D, I'm recommend the book from R.Scott Thompson: Quartz2D Graphics for Mac OSX developer.
