端端舝

MPS Setagaya 菴5隙立奈氾奴件弘
JavaScript 匹由永弁穴件! 菴2隙
踢赽�珩
Morning Project Samurai 測桶
MPS Setagaya 菴5隙 (2015/09/13)立奈氾奴件弘揃蹋 (c) Junya Kaneko

踏゜及醴㻢
JavaScript (JS) 匹
Canvas 卞 pac-man 毛鏡仁!
(Canvas 尺及鏡賒卞騻木月!)

HTML 午 DOM Tree
DOM Tree?
(HTML�极)
JavaScript
Canvas?
(HTML猁匼)
1. Context 及猁А
2. Context
Context 3. �支罷及鏡賒韜鍔
0-1. Canvas 及猁А
0-2. Canvas
HTML猁匼及�化午公木毛紱釬允月凶戶及耋撿眊

Canvas猁匼
DOM Tree?
(HTML�极)
JavaScript
Canvas?
(HTML猁匼)
1. Context 及猁А
2. Context
0-2. Canvas
罷毛鏡賒仄化桶尨允月凶戶及謞澹午�午遁�蚚撿及本永玄

Context
DOM Tree?
(HTML�极)
JavaScript
Canvas?
(HTML猁匼)
1. Context 及猁А
2. Context
0-2. Canvas
罷毛鏡賒仄化桶尨允月凶戶及�午遁�蚚撿及本永玄

JS毛蚚中凶HTML猁匼午及��
DOM Tree?
(HTML�极)
JavaScript
Canvas?
(HTML猁匼)
1. Context 及猁А
2. Context
0-2. Canvas
JavaScript 匹斛猁卅手及毛1勾1勾�楓卞龰曰堤仄化斗仁

Context 左皮斥尼弁玄
DOM Tree?
(HTML�极)
JavaScript
Canvas?
(HTML猁匼)
1. Context 及猁А
2. Context
0-2. Canvas
郔皺腔卞�午遁�蚚撿毛忒卞⻌木凶日鏡賒毛俴丹

Context 及云罷鏡五汁奈伙絻
? 侐褒倛毛鏡仁汁奈伙?
context.?llRect(left, top, width, height)
? �毛鏡仁汁奈伙?
context.arc(cx, cy, r, s_angle, e_angle, c_clockwise)
? �倛及��及伎毛硌隅允月汁奈伙?
context.strokeStyle = ※rgb(255, 0, 0)§?
context.strokeStyle = ※#FF0000§
? �倛及凤曰勾少仄伎毛硌隅允月汁奈伙?
context.?llStyle = ※rgb(255, 0, 0)§?
context.?llStyle = ※#FF0000§

ゴ隙𤩸中凶旦弁伉皿玄
<body>
<canvas id=※pac-man" width="300" height="150">?
canvas 互扔禾奈玄今木化引六氏﹝</canvas>
<script type="text/javascript">
var cv = document.getElementById(※pac-man§);
var ctx = cv.getContext(※2d");
ctx.?llStyle="#FF0000";
ctx.?llRect(20, 20, 150, 100);
</script>
</body>

<body>
ctx.?llRect(20, 20, 150, 100);
</script>
</body>
平乓件田旦及𨃨�

<body>
ctx.?llRect(20, 20, 150, 100);
</script>
</body>
JS 毛蚚中凶HTML猁匼午 context 午及��MPS Setagaya 菴5隙 (2015/09/13)立奈氾奴件弘揃蹋 (c) Junya Kaneko

<body>
ctx.?llRect(20, 20, 150, 100);
</script>
</body>
平乓件田旦午Context 及龰曰堤仄

<body>
ctx.?llRect(20, 20, 150, 100);
</script>
</body>
凤曰勾少仄及伎及偞隅午﹜侐褒倛及鏡賒

灍俴磐彆

ゴ隙及仇午手佷中堤仄卅互日
由永弁穴件毛鏡中化心方丹 !

引內反�毛鏡中化心方丹 !
<body>
<canvas id=※pac-man" width="200" height=※300§>
canvs 互扔禾奈玄今木化中引六氏﹝
</canvas>
<script>
var cv = document.getElementById(＆pac-man');
ctx.strokeStyle="#FF0000";
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
</script>
</body> MPS Setagaya 菴5隙 (2015/09/13)立奈氾奴件弘揃蹋 (c) Junya Kaneko

灍俴磐彆
喪侳互鏡井木卅中�反﹜
皮仿它扒及犯田永弘汁奈伙毛妏勻化心方丹 !
(ゴ隙及旦仿奶玉統桽)

<body>
</canvas>
<script>
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
</script>
</body>
�倛及鏡賒旦正奶伙及偞隅

<body>
</canvas>
<script>
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
</script>
</body>
仇木井日奻匹偞隅仄凶旦正奶伙及手午匹
鏡賒允月�倛及偞隅嶱宎MPS Setagaya 菴5隙 (2015/09/13)立奈氾奴件弘揃蹋 (c) Junya Kaneko

<body>
</canvas>
<script>
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
</script>
</body>
鏡賒允月�及倛毛𢜪隅?
(笢陑(100, 100)匹圉噤50及�)MPS Setagaya 菴5隙 (2015/09/13)立奈氾奴件弘揃蹋 (c) Junya Kaneko

<body>
</canvas>
<script>
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
</script>
</body> �毛凤曰勾少仄匹灍蕣卞鏡賒

arc() ��
arc(笢陑x, 笢陑y, 圉噤, 嶱宎褒僅, 皺賸褒僅, 毀媆�隙曰)
* 嶱宎褒僅﹜皺賸褒僅反仿斥失件匹硌隅?
(360僅 = 2 * Math.PI 仿斥失件)
ctx.arc(100, 100, 50, 0, 1/2 * Math.PI, true);
ctx.arc(100, 100, 50, 0, 1/2 * Math.PI, false);

仇仇引匹及引午戶
<script>
var ctx = cv.getContext(※2d§);
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
</script>
</body>
旦正奶伙及
偞隅
旦正奶伙及
羥蚚嶱宎
鏡賒允月
�倛及偞隅
灍蕣卞�倛
毛鏡賒

Q. 由永弁穴件卞諳毛𤩸中化心方丹!

Q. 由永弁穴件卞諳毛𤩸中化心方丹!
? 甲件玄1?
啞中圮倛毛喪中侳卞笭友化支木壬中中!!
? 甲件玄2?
圮倛反升丹支勻化釬木壬中中??
+

A. 由永弁穴件卞諳毛𤩸中化心方丹!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.strokeStyle="#FFFFFF";
ctx.?llStyle="#FFFFFF";
ctx.lineWidth=3;
ctx.beginPath();
ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180)
ctx.moveTo(100, 100);
ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180),
100 + 50 * Math.sin(-30 * Math.PI/180));
ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180),
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();
喪中�毛鏡賒

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();
仇仇井日狟匹鏡仁
�倛反啞伎

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();
仇仇井日狟匹鏡仁
�倛反啞伎匹
仿奶件及怮今反3

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();
奻�及旦正奶伙偞隅及手午
鏡賒仄凶中�倛毛偞隅嶱宎

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();
笢陑褒互 -30 井日 30 及�

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();
鏡賒及嶱宎萸毛(100, 100)
卞痄�

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();
(100, 100)井日硌隅仄凶釱㻢
引匹眻�毛偞隅 (啞啣統桽)

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();
珨勾ゴ及眻�及皺萸井日
硌隅仄凶釱㻢引匹眻�毛偞隅
(啞啣統桽)

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();
踏引匹偞隅仄化五凶�倛及
��毛鏡賒

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.?ll();
ctx.lineWidth=3;
ctx.beginPath();
100 + 50 * Math.sin(-30 * Math.PI/180));
100 + 50 * Math.sin(30 * Math.PI/180));
ctx.stroke();
ctx.?ll();
踏引匹偞隅仄化五凶�倛毛
凤曰勾少仄化鏡賒

棒隙
�仁pac-man !!!

端端舝

JavaScript 匹由永弁穴件! 菴2隙

More Related Content

JavaScript 匹由永弁穴件! 菴2隙