Canvas

Canvas(2d)

ID width height =========================== Id= ID width = height = " ============================= style

canvas

canvas

Canvas 1024 764

Xpx Ypx

764px

1024px

X1024px Y764px

canvas

canvas

canvas getContext DOM

getContext 1

2d 1

DD

var can = document.getElementById("drowarea");

var ctx = can.getContext("2d"); getElementById DOM getContext(2d

canvas

canvas

canvas

canvas

//ctx.llStyle = "#0000";//fontctx.font = "20px _sans";//ctx.textBaseline = "top";//ctx.llText("Hello World!", 100, 80 );

ctx.textBaseline:http://www.html5.jp/canvas/ref/property/textBaseline.html

canvas_font.html

canvas

canvas

ctx.rect(0,0,60,60);ctx.stroke();

Rect()

ctx.llStyle = "#000";ctx.rect(10,10,40,40);ctx.ll();

ll

ll

canvas_sikaku.html

canvas_sankaku.html

canvas

canvas

ctx.arc(100, 100, 50, 0, Math.PI*2, false);

arc(())

ctx.llStyle = "#000";ctx.arc(100, 100, 50, 0, Math.PI*2, false);ctx.ll();

canvas_arc.html

ll

ll

//context. beginPath()(0,0)

context.beginPath();

// x y

context.moveTo(, );

//

context.lineTo(, );

//

context.stroke();

//

context.closePath();

100100

100100 110px 110px

canvas

canvas

2canvas_write.html

1canvas_line.html

(

sample/canvas.html

canvas.html canvasmousedownmousemove mouseup canvasmouse

kadai_canvas.html LocalStorage (toDataURL) LocalStorage toDataURL http://www.html5.jp/canvas/ref/HTMLCanvasElement/sample/toDataURL.html