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
Top Related