�¿ HTML5ã®canvasを利用ã—ã¦å†�¼§ã‚’æãæ–¹æ³�
ã€ã“ã®æ•™æã«ã¤ã�¦ã€�
2019.2.10ç¾åœ¨ã®ä½œå‹•ç¢ºèª�
� PC� Google Chrome 72.0.3626.96
� Android� Google Chrome
â—� Microsoft Edge 42.17134.1.0
â—� Firefox Quantum 65.0
â—� Internet Explorer 11
� windows� Safari

 ã“ã�æ•™æã¯�ŒHTML5+javascriptã§å¯èƒ½ã¨ãªã£ãŸcanvasã«ã‚ˆã‚‹ã‚°ãƒ©ãƒ•ã‚£ãƒ�‚¯ã‚¹ã«ã¤ã�¦�Œã�ログラマã�å‘ã‘ã«ç„¡é§�ªã正確ãªè§£èª¬ã‚’è¡Œã†ã“ã¨ã‚’ç›®çš�¨ã—ãŸã‚‚ã�ã§ã¯ã‚ã‚Šã¾ã›ã‚“�Žä¸­é«˜ç”Ÿãƒ¬ãƒ™ãƒ«ã®èª­è€�‘ã‘ã«�Œå¤šå°‘ã¨ã‚‚厳å¯�•ã‚’犠牲ã«ã—ã¦ã§ã‚‚,例ã¨å›³ã‚’中å¿�¨ã—ã¦�Œå¹³æ˜“ã§åˆ�‹ã‚Šæ�ã�§£èª¬ã¨ãªã‚‹ã“ã¨ã‚’ç›®æŒ�—ã¦ã�¾ã™ï¼�
 ã¾ãŸï¼ŒæŠ€è¡“é©æ–°ã®è‘—ã—ã��野ã§ã™ã�ã§�Œæœ€æ–°ã®æ­£ç¢ºãªæƒ��±ã‚’確ã‹ã‚ãŸã„å ´åˆã«ã¯�Œæ¬¡ã®ã‚µã‚¤ãƒˆã‚’å‚è€�«ã—ã¦ãã ã•ã„��
�»æ—¥æœ¬èªžï¼½
MDN Web docs mozilla canvas ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«
ã¨ã»ã»ã®WWW入門 Canvas 2Dリファレンス
�»è‹±èªžï¼½…日本語訳ãŒã¾ã�ãªã�®�‰€ã‚’確ã‹ã‚ãŸã„ã¨ããªã©
W3C HTML Canvas 2D Context
MDN Web docs mozilla Canvas tutorial

1. canvasを使ã£ã¦å†�¼§ã‚’æãæ–¹æ³�

å†�¼§�ˆå�ã®ä¸€éƒ¨�‰ã¾ãŸã�å†�‚’æãã«ã¯��
コンãƒ�‚­ã‚¹ãƒ�.arc(中å¿��x座æ¨�, 中å¿��y座æ¨�, åŠå¾�, 開始è§�, 終äº�§�, 回転方å�);
ã®æ›¸å¼ã§æ›¸ãã¾ã™ï¼�

-図1-
 図�‘ã«ã‚ˆã†ã«�Œæ画領域ã®å·¦ä¸Šç«¯ã�(0,0)ã§�Œå³ã«è¡Œãã»ã©�˜åº§æ¨™ï¼ˆãƒ”クセルå˜ä½ï¼‰ãŒå¢—加ã—ã¾ã™ï¼Žä»–æ–¹ã§�Œå�期設定ã§ã¯�Œï½™åº§æ¨™ã�下ã«è¡Œãã»ã©å¢—ãˆã‚‹ã“ã¨ã«æ³¨æ„ã—ã¦ãã ã•ã„�Žï¼ˆæ•°å­¦ã®åº§æ¨™ã¨ã¯ä¸Šä¸‹ãŒé€�§ã™ï¼‰ï¼�
 ã—ãŸãŒã£ã¦�Œä¾‹ãˆã° x=50, y=60ã¨ã�†ç‚¹ã¯�Œã‚­ãƒ£ãƒ³ãƒã‚¹ã®å·¦ä¸Šç«¯ã‹ã‚‰å³ã«50ピクセル�Œä¸‹ã«60ピクセルã�ã‘進んã ã¨ã“ã‚ã«ãªã‚Šã¾ã™ï¼�
角ã¨å›žè»¢æ–¹å�
(1) å˜ä½ã�ラジアンã§ã™ï¼Žè§’度ã®å˜ä½ï¼šãƒ©ã‚¸ã‚¢ãƒ³ã¯é«˜æ�¡æ•°å­¦â…¡ã§ç¿’ã„ã¾ã™ãŒ�Œå�ã‹ã‚Šã«ãã„å ´åˆã«åº¦ã®å˜ä½ã«ç›´ã—ã¦ä½¿ã�«ã¯�Œæ¬¡ã®é–¢æ•°ã‚’定義ã—ã¦ãŠãã¨�Œåº¦ã®å˜ä½ã§ä½¿ãˆã‚‹��
function d2r(degree1) //degree_to_radianを短縮ã—ãŸã‚‚ã�
{return degree1 * Math.PI / 180; //å†�‘¨çŽ�Ï€ã¯�ŒMath.PIã«ã‚ˆã‚Šæ±‚ã‚られã‚�
}
 よã使ã�§’度ã«ã¤ã�¦�Œãƒ©ã‚¸ã‚¢ãƒ³ã¨åº¦ã¯æ¬¡ã®å›³ã®ã‚ˆã†ã«å¯¾å¿œã—ã¦ã�‚‹��

-図2-
(2) åˆæœŸè¨­å®šã§�Œy座標ãŒä¸‹ã«è¡Œãã»ã©å¢—ãˆã‚‹ã“ã¨ã¨å¯¾å¿œã—ã¦�Œå›³2ã«ç¤ºã•ã‚Œã‚‹ã‚ˆã�«�Œå§‹ç·šï¼�0°[0ラジアン]�‰ã‚’å³å‘ãã«ã¨ã£ã¦�Œå�周上ã§å§‹ç·šã‹ã‚‰ã€Œæ™‚計回りã«ã€é€²ã‚“ã è§’ã«ã‚ˆã£ã¦�Œé–‹å§‹è§�, 終äº�§’ã�å‘ã�ˆå�´æ‰€�‰ã‚’決ã‚ã¾ã™ï¼Žæ¬¡ã«�Œå›žè»¢æ–¹å‘ã�引数ã¯�Œå時計方å‘ãªã‚� true�»1ã§ã‚‚よã�¼½�Œæ™‚計回りãªã‚� false�»0ã§ã‚‚よã�Œ��-1ãªã©ã¯ãƒ€ãƒ¡��0以外ã�ã™ã¹ã¦çœ�=1ã¨è¦‹ãªã•ã‚Œã‚‹ï¼½ã§æŒ�®šã—ã¾ã™ï¼�

- 図3 -    - 図4 -    - 図5 -
 図3�žå›³5ã¯�Œãƒ©ã‚¸ã‚¢ãƒ³ã®å˜ä½ã§æ›¸ã�Ÿã‚‚ã�ã§��
図3ã¯
コンãƒ�‚­ã‚¹ãƒ�.arc(50,50,40, 0, Math.PI, true);
ã¨æ›¸ã�Ÿå ´åˆã§�Œx=50, y=50 を中å¿�¨ã™ã‚‹åŠå¾� r=40 ã®å†�‘¨ã®ã�¡ã§�Œé–‹å§‹è§� 0ラジアン�Œã‹ã‚‰ï¼Œçµ‚äº�§�πラジアンã¾ã§å時計回りã«å›žã£ãŸã¨ãã�åŠå�ã«ãªã‚Šã¾ã™ï¼Žï¼ˆç·šã�色�Œå¹��åˆæœŸè¨­å®šã�é»’ï¼�1ピクセルã§ã™ï¼�
図4ã¯
コンãƒ�‚­ã‚¹ãƒ�.arc(150,50,40, 0, Math.PI, false);
ã¨æ›¸ã�Ÿå ´åˆã§�Œx=150, y=50 を中å¿�¨ã™ã‚‹åŠå¾� r=40 ã®å†�‘¨ã®ã�¡ã§�Œé–‹å§‹è§� 0ラジアン�Œã‹ã‚‰ï¼Œçµ‚äº�§�πラジアンã¾ã§æ™‚計回りã«å›žã£ãŸã¨ãã�åŠå�ã«ãªã‚Šã¾ã™ï¼Žï¼ˆç·šã�色�Œå¹��åˆæœŸè¨­å®šï¼�
図5ã¯
コンãƒ�‚­ã‚¹ãƒ�.arc(250,50,40, 5*Math.PI/3, Math.PI/3, true);
ã¨æ›¸ã�Ÿå ´åˆã§�Œx=250, y=50 を中å¿�¨ã™ã‚‹åŠå¾� r=40 ã®å†�‘¨ã®ã�¡ã§��開始è§� 5Ï€/3ラジアン�Œã‹ã‚‰ï¼Œçµ‚äº�§�Ï€/3ラジアンã¾ã§å時計回ã‚�ã«å›žã£ãŸã¨ãã�å†�¼§ã«ãªã‚Šã¾ã™ï¼Žï¼ˆç·šã�色�Œå¹��åˆæœŸè¨­å®šï¼�
ã“ã�例ã�よã†ã«��開始è§� a�Œçµ‚äº�§� b 㧠a>b ã®ã¨ãã���開始角ã¨çµ‚äº�§’を入れæ›ãˆã¦�Œå›žè»¢æ–¹å‘ã‚’é€�‘ãã«ã—ãŸã‚‚ã�ã¨ä¸€è‡´ã—ã¾ã™ï¼Žã™ãªã‚ã¡�Œå›³5ã¯
コンãƒ�‚­ã‚¹ãƒ�.arc(250,50,40, Math.PI/3, 5*Math.PI/3, false);
ã¨åŒã˜ã«ãªã‚Šã¾ã™ï¼�
度ã®å˜ä½ã§æ›¸ã� 図6�žå›³8ã¯�Œåº¦ã®å˜ä½ã§æ›¸ããŸã‚ã«�Œåº¦ã‹ã‚‰ãƒ©ã‚¸ã‚¢ãƒ³ã«å¤‰æ›ã™ã‚‹é–¢æ•°d2r(degree1)を定義ã—ã¦�Œé–‹å§‹è§’,終äº�§’ã«ãれを使ã£ã¦ã�¾ã™ï¼�

- 図6 -    - 図7 -    - 図8 -
図6ã¯
コンãƒ�‚­ã‚¹ãƒ�.arc(50,50,40, d2r(30), d2r(120), 1);
ã¨æ›¸ã�Ÿå ´åˆã§�Œx=50, y=50 を中å¿�¨ã™ã‚‹åŠå¾� r=40 ã®å†�‘¨ã®ã�¡ã§�Œé–‹å§‹è§� 30°ã‹ã‚‰�Œçµ‚äº�§�120°ã¾ã§å時計回りï¼�1ã¯true�‰ã«å›žã£ãŸã¨ãã�å†�¼§ã«ãªã‚Šã¾ã™ï¼Žï¼’ãƒã‚¤ãƒˆæ–‡å­—ã�°ã®ãƒžã�クã¯æ›¸ã‹ãªã�¼Žï¼ˆç·šã�色ã¯��コンãƒ�‚­ã‚¹ãƒ�.strokeStyle = "red";ã«ã‚ˆã‚Šèµ¤�Œç·šã�å¹��コンãƒ�‚­ã‚¹ãƒ�.lineWidth = 10;ã«ã‚ˆã‚Š10ピクセル��
図7ã¯
コンãƒ�‚­ã‚¹ãƒ�.arc(150,50,40,d2r(30), d2r(120), 0);
ã¨æ›¸ã�Ÿå ´åˆã§�Œx=150, y=50 を中å¿�¨ã™ã‚‹åŠå¾� r=40 ã®å†�‘¨ã®ã�¡ã§�Œé–‹å§‹è§� 30°ã‹ã‚‰�Œçµ‚äº�§�120°ã¾ã§æ™‚計回りï¼�0ã¯false�‰ã«å›žã£ãŸã¨ãã�å†�¼§ã«ãªã‚Šã¾ã™ï¼Žï¼’ãƒã‚¤ãƒˆæ–‡å­—ã�°ã®ãƒžã�クã¯æ›¸ã‹ãªã�¼Žï¼ˆç·šã�色ã¯��コンãƒ�‚­ã‚¹ãƒ�.strokeStyle = "blue";ã«ã‚ˆã‚Šé’,線ã�å¹��コンãƒ�‚­ã‚¹ãƒ�.lineWidth = 20;ã«ã‚ˆã‚Š20ピクセル��
図8ã¯
コンãƒ�‚­ã‚¹ãƒ�.arc(250,50,20,d2r(30), d2r(120), -1);
ã¨æ›¸ã�Ÿå ´åˆã§�Œx=250, y=50 を中å¿�¨ã™ã‚‹åŠå¾� r=20 ã®å†�‘¨ã®ã�¡ã§�Œé–‹å§‹è§� 30°ã‹ã‚‰�Œçµ‚äº�§�120°ã¾ã§æ™‚計回りï¼�-1ã¯trueãªã®ã§��1ã®é€�§ã¯ãªã�“ã¨ã«æ³¨æ„)ã«å›žã£ãŸã¨ãã�å†�¼§ã«ãªã‚Šã¾ã™ï¼Žï¼’ãƒã‚¤ãƒˆæ–‡å­—ã�°ã®ãƒžã�クã¯æ›¸ã‹ãªã�¼Žï¼ˆç·šã�色ã¯��コンãƒ�‚­ã‚¹ãƒ�.strokeStyle = "green";ã«ã‚ˆã‚Šç·‘,線ã�å¹��コンãƒ�‚­ã‚¹ãƒ�.lineWidth = 20;ã«ã‚ˆã‚Š20ピクセル��.åŠå¾�20ピクセルã®å†�¼§�»å‚è€�¨ã—ã¦ã‚�‚„白ã�‰²ã§ç¤ºã—ãŸç·šï¼½ã«�Œå¹�20ピクセルã®å†�‘¨ã‚’æã�¦ã‚‚å�部ã¯åŸ‹ã¾ã‚‰ãªã�“ã¨ã«æ³¨æ„�…å¹�20ピクセルã®ç·šã��ŒåŠå¾�20ピクセルã®ç·šã‚’真ん中ã«ã—ã¦�Œãã®ä¸¡å´10ピクセルãšã¤ã®ç·šãŒå¼•ã‹ã‚Œã‚‹

2. 数学座標を使ã£ã¦å†�¼§ã‚’æãæ–¹æ³�


-図9-
数学座æ¨�ã§ã¯�Œã‚³ãƒ³ãƒ”ュータ上ã«åˆæœŸè¨­å®šã§ç¤ºã•ã‚Œã‚‹åº§æ¨™ã¨ã¯ç•°ãªã‚Šï¼Œå›³9ã®ã‚ˆã†ã«�™åº§æ¨™ã�上ã«è¡Œãã»ã©å¤§ãããªã‚Šã¾ã™ï¼Žã“ã®ã‚ˆã†ã«ã‚³ãƒ³ãƒ”ュータ上ã�åˆæœŸè¨­å®šã‚’変更ã—ã¦�Œï½˜åº§æ¨™ã�変更ã›ãšã«�™åº§æ¨™ã ã‘é€�‘ãã�座標系ã«å¤‰æ›ã™ã‚‹ã«ã¯��
コンãƒ�‚­ã‚¹ãƒ�.scale(1, -1);
ã¨ã—ã¾ã™ï¼Žä¸€èˆ¬ã«��コンãƒ�‚­ã‚¹ãƒ�.scale(s, t);ã¨ã™ã‚‹ã¨�Œï½˜æ–¹å‘ã«så€ï¼Œï½™æ–¹å‘ã«tå€ã—ã¦æç”»ã•ã‚Œã¾ã™ï¼�
注æ„�(1)ã“ã�変æ›ã‚’è¡Œã†ã¨�Œå�周上ã§è§’度を表ã™ä½ç½®ã‚‚上下ãŒé€�«ãªã‚Šï¼Œæ¬¡ã®å›³10ã®ã‚ˆã†ã«ãªã‚‹ã“ã¨ã«æ³¨æ„ã—ã¾ã—ょã�¼�

-図10-

注æ„�(2)コンãƒ�‚­ã‚¹ãƒ�.scale(1, -1);ã«ã‚ˆã£ã¦�Œï½™åº§æ¨™ã�符å·ã‚’é€�«ã™ã‚‹ã¨�Œæ¬¡ã®å›³11�Œå›³12ã®å…��座標ã�よã†ã«ç”»é¢ä¸Šã��™åº§æ¨™ãŒã™ã¹ã¦è²�ã«ãªã‚Šï¼Œä½¿ã�«ãããªã‚Šã¾ã™ï¼Žãã“ã§��コンãƒ�‚­ã‚¹ãƒ�.translate(a, b);ã«ã‚ˆã£ã¦�ŒåŽŸç‚¹ã‚�(a, b)ã«å¹³è¡Œç§»å‹•ã™ã‚‹å¤‰æ›ã‚’併用ã™ã‚‹ã¨ã‚ˆã„��
 ãŸã ã—,[1] コンãƒ�‚­ã‚¹ãƒ�.scale(1, -1);ã‚�コンãƒ�‚­ã‚¹ãƒ�.translate(a, b);ã‚‚ã™ã§ã«æç”»ã•ã‚Œã¦ã�‚‹å›³å½¢ã«ã¯å½±éŸ¿ã—ãªã�¼� [2] コンãƒ�‚­ã‚¹ãƒ�.scale(1, -1);ã¨ã‚³ãƒ³ãƒ�‚­ã‚¹ãƒ�.translate(a, b);ã®è¨˜è¿°é �ºãŒé‡è¦ã§ã™ï¼Žé��ºã‚’変ãˆã‚‹ã¨�Œç•°ãªã‚‹çµæžœã«ãªã‚Šã¾ã™ï¼�


æ•°å­¦ã®æ•™ç§‘書ã«å‡ºã¦ãã‚‹�Œå›³13ã®ã‚ˆã†ãªåº§æ¨™ç³»ã«ã™ã‚‹ã«ã¯��コンãƒ�‚­ã‚¹ãƒ�.translate(50, 50);ã®å¾Œã«ã‚³ãƒ³ãƒ�‚­ã‚¹ãƒ�.scale(50, -50);ã¨ã™ã‚Œã°ã‚ˆã„��

- 図13 -
ãŸã ã—,ã“ã®ã‚ˆã†ã«ã‚¹ã‚±ãƒ¼ãƒ«ã‚’拡大ã™ã‚‹ã¨�Œãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã�ç·šå¹�1ã§ã¯å¤ªã™ãŽã‚‹ã�ã§��コンãƒ�‚­ã‚¹ãƒ�.lineWidth = 0.01;ãªã©ã¨åŠå¾��100åˆ���‘程度ã®ç·šå¹�«å¤‰æ›´ã™ã‚‹��
 ã¾ãŸï¼Œcanvasã®ãƒ¬ãƒ•ã‚¡ãƒ¬ãƒ³ã‚¹ãƒ»ãƒžãƒ‹ãƒ¥ã‚¢ãƒ«ã«æ›¸ã‹ã‚Œã¦ã�‚‹å›žè»¢æ–¹å‘ï¼�anticlockwise�‰ã��Œã€Œå時計回りï¼�true�‰ï¼Œæ™‚計回りï¼�false�‰ã§åˆ�‘るよりã�ã€ã€Œï½˜è»¸ã®æ­£ã®å‘ãã‹ã‚‰�™è»¸ã®æ­£ã®å‘ãã«�ˆå°ã•ã�–¹ã®è§’ï¼�90°ã§å›žã‚‹å‘ããŒfalse=0�Œï¼ˆå¤§ãã„æ–¹ã®è§’ï¼�270°ã§å›žã‚‹å‘ããŒtrue=1ã€ã¨è€�ˆã‚‹ã¨�Œãƒ–ラウザã§ã®å®Ÿè£�¨åˆã†��
 ã•ã‚‰ã«�Œæ³¨æ„ã™ã¹ãã“ã¨ã¨ã—ã¦�Œã‚³ãƒ³ãƒ�‚­ã‚¹ãƒˆå–得後ã��ŒbeginPath()ã®å‘¼ã³å‡ºã—ã�有無ã«ã‹ã‹ã‚らãšï¼�コンãƒ�‚­ã‚¹ãƒ�.translate(a, b);ã‚�コンãƒ�‚­ã‚¹ãƒ�.scale(s, -t);を何度も使ã�¨�Œåº§æ¨™ç³»ãŒã•ã‚‰ã«å¤‰æ›ã•ã‚Œã‚‹ã“ã¨ã¨ãªã‚‹ã�ã§�Œè¤�•°ã®å›³å½¢ã‚’åŒä¸€ã‚­ãƒ£ãƒ³ãƒã‚¹ä¸Šã«æãå ´åˆã§ã‚‚ï¼�コンãƒ�‚­ã‚¹ãƒ�.translate(a, b);ã‚�コンãƒ�‚­ã‚¹ãƒ�.scale(s, -t);ã¯�Œå�ã‚ã«ã€Œï¼‘回ã€ã ã‘使用ã™ã‚‹ã“ã¨ã«ã™ã‚‹ã¨�ŒåŒä¸€åº§æ¨™ç³»ã§ã®æç”»ã«ã§ãã‚‹��

- 図14 -    - 図15 -    - 図16 -
<canvas id="my_canvas3" width="300" height="100"></canvas>
<script type="text/javascript">
function deg2rad(degree1)
{return degree1 * Math.PI / 180;
}//度ã®è§’度をラジアンã«å¤‰æ›ã™ã‚‹é–¢æ•°ã®å®šç¾©
cname3 = document.getElementById("my_canvas3");
ctx3 = cname3.getContext("2d");
ctx3.translate(50,50);
ctx3.scale(50,-50);
//translate()ã¨scale()ã¯åˆã‚ã«�‘回ã�ã‘使ã�
ctx3.beginPath();
ctx3.arc(0,0,1,deg2rad(0), deg2rad(150),false);
//0°ã‹ã‚‰150°ã¾ã§å·¦å›žã‚Š
ctx3.lineWidth = 0.01;
ctx3.stroke();
図14ã¯
コンãƒ�‚­ã‚¹ãƒ�.arc(0,0,1,deg2rad(0), deg2rad(150),false);
ã«ã‚ˆã‚Š��0°ã‹ã‚‰150°ã¾ã§�Œx正→yæ­£ã®è¿‘回ã‚�(=false)ã§å†�¼§ã‚’æã�Ÿã‚‚ã�
�ˆâ€»å時計回りãŒtrueã¨è¦šãˆã¦ã�‚‹ã¨åˆã‚ãªã�¼�
ctx3.beginPath();
ctx3.arc(2,0,1,deg2rad(60),deg2rad(270),true);
//60°ã‹ã‚‰270°ã¾ã§å³å›žã‚Š
ctx3.strokeStyle = "red";
ctx3.lineWidth = 0.02;
ctx3.stroke();
図15ã¯
コンãƒ�‚­ã‚¹ãƒ�.arc(2,0,1,deg2rad(60),deg2rad(270),true);
ã«ã‚ˆã‚Š��60°ã‹ã‚‰270°ã¾ã§�Œx正→yæ­£ã®é�回り(=true)ã§å†�¼§ã‚’æã�Ÿã‚‚ã�
ctx3.beginPath();
ctx3.arc(4,0,1,deg2rad(270), deg2rad(60),false);
//270°ã‹ã‚‰60°ã¾ã§å·¦å›žã‚Š
ctx3.strokeStyle = "green";
ctx3.lineWidth = 0.03;
ctx3.stroke();
</script>
図16ã¯
コンãƒ�‚­ã‚¹ãƒ�.deg2rad(270), deg2rad(60),false);
ã«ã‚ˆã‚Š��270°ã‹ã‚‰60°ã¾ã§�Œx正→yæ­£ã®è¿‘回ã‚�(=false)ã§å†�¼§ã‚’æã�Ÿã‚‚ã�
図15ã¨åŒã˜å½¢ã«ãªã‚�

3. å†�‚’æãæ–¹æ³�

å†�¼ˆã¡ã‚�†ã©1周ã—ã¦ã�‚‹ã‚‚ã��‰ã‚’æãã«ã¯�Œé–‹å§‹è§’ã¨çµ‚äº�§’ã¨ã—ã¦360°��2πラジアン�‰ã ã‘ç•°ãªã‚‹è§’度を指定ã™ã‚Œã�よã„�Žå›žè»¢æ–¹å‘ã�ã©ã¡ã‚‰ã§ã‚‚よã�Œ��0°ã‹ã‚‰0°ã®ã‚ˆã†ãªã€ŒåŒã˜å€¤ã€ã§ã¯ä½•ã‚‚æã‹ã‚Œãªã�¼�
- 図17 -  - 図18 -  - 図19 -  - 図20 -
図17ã¯��コンãƒ�‚­ã‚¹ãƒ�.translate(50, 50);ã®å¾�コンãƒ�‚­ã‚¹ãƒ�.scale(40, -40);を実行,ãã®å¾Œï¼Œã‚³ãƒ³ãƒ�‚­ã‚¹ãƒ�.arc(0,0,1,0, 2*Math.PI,false);ã«ã‚ˆã‚Š�Œä¸­å¿�(0,0)�ŒåŠå¾�1ã®å†�‚’開始è§�0ラジアン�Œçµ‚äº�§�2πラジアンã§å·¦å›žã‚Šã«1周ã—ãŸã‚‚ã�ã§ã™ï¼�
図18ã¯�Œã‚³ãƒ³ãƒ�‚­ã‚¹ãƒ�.arc(2.1,0,1,2*Math.PI,0,false);ã«ã‚ˆã‚Š�Œä¸­å¿�(2.1,0)�ŒåŠå¾�1ã®å†�‚’開始è§�2πラジアン�Œçµ‚äº�§�0ラジアンã§å·¦å›žã‚Šã«1周ã—ãŸã‚‚ã�ã§ã™ï¼Žï¼ˆåŒã˜ãå†�«ãªã‚Šã¾ã™ï¼�
図19ã¯�Œã‚³ãƒ³ãƒ�‚­ã‚¹ãƒ�.arc(4.2,0,1,2*Math.PI, 4*Math.PI,true);ã«ã‚ˆã‚Š�Œä¸­å¿�(4.2,0)�ŒåŠå¾�1ã®å†�‚’開始è§�2πラジアン�Œçµ‚äº�§�4πラジアンã§å³å›žã‚Š1周ã—,水色ã®ä¸­å¡—ã‚Šã§ã‚³ãƒ³ãƒ�‚­ã‚¹ãƒ�.fill();ã‚’é’ã®ãƒ©ã‚¤ãƒ³ã§ã‚³ãƒ³ãƒ�‚­ã‚¹ãƒ�.stroke();を実行ã—ãŸã‚‚ã®ã§ã™ï¼�
図20ã¯�Œã‚³ãƒ³ãƒ�‚­ã‚¹ãƒ�.arc(6.3,0,1,Math.PI/6, 3*Math.PI/2,false);ã«ã‚ˆã‚Š�Œä¸­å¿�(6.3,0)�ŒåŠå¾�1ã®å†�‚’開始è§�Ï€/6ラジアン�Œçµ‚äº�§�3*Ï€/2ラジアンã§å·¦å›žã‚Šã«å–ã£ã¦ã‹ã‚‰�Œç·‘色ã®ä¸­å¡—ã‚Šã§ã‚³ãƒ³ãƒ�‚­ã‚¹ãƒ�.fill();を実行ã—ãŸã‚‚ã®ã§ã™ï¼�
â—�== メニューã«æˆ»ã‚� ==