{"id":1925,"date":"2023-04-07T17:51:40","date_gmt":"2023-04-07T08:51:40","guid":{"rendered":"https:\/\/trend-appsweb.com\/myportfolio\/?p=1925"},"modified":"2024-02-11T18:20:28","modified_gmt":"2024-02-11T09:20:28","slug":"javascript%e3%81%a7%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%90%e3%82%b9%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e6%8f%8f%e7%94%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8b%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/trend-appsweb.com\/myportfolio\/?p=1925","title":{"rendered":"JavaScript\u3067\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u4f7f\u3063\u305f\u63cf\u753b\u30a2\u30d7\u30ea\u3092\u4f5c\u308b\u65b9\u6cd5"},"content":{"rendered":"

\u30c6\u30fc\u30de<\/h3>\n

\u3053\u3093\u306b\u3061\u306f\uff01\uff01naoto555\u3067\u3059\u3002
\n<\/span>\u4eca\u56de\u306f\u3001JavaScript\u3092\u4f7f\u3063\u3066\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u6271\u3046\u65b9\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002
\n\u30ad\u30e3\u30f3\u30d0\u30b9\u3068\u306f\u3001Web\u30da\u30fc\u30b8\u4e0a\u3067\u81ea\u7531\u306a\u56f3\u5f62\u3092\u63cf\u753b\u3059\u308b\u305f\u3081\u306e\u9818\u57df\u3067\u3059\u3002JavaScript\u3092\u4f7f\u3046\u3053\u3068\u3067\u3001\u30de\u30a6\u30b9\u3084\u30bf\u30c3\u30c1\u64cd\u4f5c\u3067\u81ea\u7531\u306a\u7dda\u3084\u56f3\u5f62\u3092\u63cf\u304f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001\u624b\u66f8\u304d\u306e\u30e1\u30e2\u30a2\u30d7\u30ea\u3084\u30da\u30a4\u30f3\u30c8\u30a2\u30d7\u30ea\u306a\u3069\u304c\u3042\u308a\u307e\u3059\u3002
\n\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u57fa\u672c\u7684\u306a\u64cd\u4f5c\u65b9\u6cd5\u304b\u3089\u3001\u76f4\u7dda\u3084\u5186\u3001\u77e9\u5f62\u306a\u3069\u69d8\u3005\u306a\u56f3\u5f62\u306e\u63cf\u753b\u65b9\u6cd5\u3001\u6587\u5b57\u3084\u753b\u50cf\u306e\u6271\u3044\u65b9\u307e\u3067\u3001\u5e45\u5e83\u304f\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002
\n\u3055\u3089\u306b\u3001\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u4f7f\u3063\u3066\u4f5c\u6210\u3067\u304d\u308b\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3084\u3001\u5b9f\u969b\u306b\u624b\u3092\u52d5\u304b\u3057\u3066\u5b66\u3076\u305f\u3081\u306e\u6f14\u7fd2\u554f\u984c\u3082\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002
\n\u3053\u306e\u77e5\u8b58\u3092\u8eab\u306b\u3064\u3051\u308b\u3053\u3068\u3067\u3001\u81ea\u5206\u3067\u30a2\u30a4\u30c7\u30a2\u3092\u51fa\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3057\u3001Web\u30da\u30fc\u30b8\u4e0a\u3067\u81ea\u7531\u306a\u63cf\u753b\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002\u305c\u3072\u3001\u6700\u5f8c\u307e\u3067\u3054\u89a7\u3044\u305f\u3060\u304d\u3001\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u9b45\u529b\u306b\u89e6\u308c\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff01(2024.2\u8a18\u8f09)<\/span><\/p>\n

\u63cf\u753b\u624b\u9806<\/h3>\n

\u30ad\u30e3\u30f3\u30d0\u30b9\u3078\u306e\u63cf\u753b\u306f\u4ee5\u4e0b\u3001\u2460~\u2464\u306e\u3088\u3046\u306a\u624b\u9806\u3067\u9032\u3081\u3066\u3044\u304d\u307e\u3059\u3002\u307e\u305a\u306fHMTL\u3067\u3001canvas\u9818\u57df(500px \u00d7 500px)\u3092\u5b9a\u7fa9\u3057\u3066\u3044\u304d\u307e\u3059\u3002
\n\u2460HTML\u306e\u4f5c\u6210<\/span><\/strong><\/p>\n

\n
<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n<head>\r\n\u00a0 \u00a0 <meta charset=\"UTF-8\">\r\n\u00a0 \u00a0 <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\u00a0 \u00a0 <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n\u00a0 \u00a0 <canvas id=\"canvas\" width=\"500\" height=\"500\" style=\"background-color:lightgray;\"><\/canvas>\r\n\r\n    <script type=\"text\/javascript\">\r\n        \/\/\u3053\u3053\u306bJavaScript\u3092\u8a18\u8f09\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n
\u6b21\u306bJavaScript\u3067\u4ee5\u4e0b\u306e\u51e6\u7406\u3092\u884c\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
\u2461JavaScript\u3067canvas\u8981\u7d20\u3078\u306e\u53c2\u7167\u5148\u3092\u53d6\u5f97<\/span><\/strong><\/p>\n
\n
\/\/\u2461JavaScript\u3067canvas\u8981\u7d20\u3078\u306e\u53c2\u7167\u3092\u53d6\u5f97\r\nconst canvas = document.getElementById(\"canvas\");<\/code><\/pre>\n<\/div>\n
\u2462canvas\u8981\u7d20\u306e\u53c2\u7167\u304b\u3089\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u4f7f\u7528
\n<\/span><\/strong>\u203bJavaScript\u3067canvas\u3092\u64cd\u4f5c\u3059\u308b\u305f\u3081\u306b\u306f\u3001’getContext’\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3063\u3066\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53d6\u5f97\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u30ad\u30e3\u30f3\u30d0\u30b9\u8981\u7d20\u306b\u306f\u3001\u63cf\u753b\u306b\u5fc5\u8981\u306a\u60c5\u5831(\u7dda\u306e\u8272\u3001\u592a\u3055\u7b49)\u3092\u6301\u3064\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\uff08Context\uff09\u304c\u5b58\u5728\u3057\u307e\u3059\u3002\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306f\u3001\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u63cf\u753b\u3084\u30a8\u30d5\u30a7\u30af\u30c8\u306e\u4f5c\u6210\u306b\u5fc5\u8981\u306a\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u7c21\u5358\u306b\u8a00\u3046\u3068\u3001\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306f\u30ad\u30e3\u30f3\u30d0\u30b9\u4e0a\u306b\u63cf\u753b\u3059\u308b\u305f\u3081\u306e\u9053\u5177\u7bb1\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3002<\/span>
\n<\/span><\/strong><\/p>\n
\n
\/\/\u2462canvas\u8981\u7d20\u306e\u53c2\u7167\u304b\u3089\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u53d6\u5f97 \r\nconst ctx = canvas.getContext(\"2d\");<\/code><\/pre>\n<\/div>\n
\u2463\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306b\u8272\u3084\u7dda\u3001\u592a\u3055\u306a\u3069\u3092\u8a2d\u5b9a
\n<\/span><\/strong><\/p>\n
\n
\/\/\u2463\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306b\u8272\u3084\u5148\u3001\u592a\u3055\u306a\u3069\u3092\u8a2d\u5b9a\r\nctx.strokeStyle = \"red\";         \/\/ \u7dda\u306e\u8272\u3092\u8a2d\u5b9a             ->\u8d64<\/span>\r\nctx.fillStyle = \"lithtblue\";     \/\/ \u5857\u308a\u306e\u8272\u3092\u8a2d\u5b9a           ->\u30e9\u30a4\u30c8\u30d6\u30eb\u30fc<\/span>\r\nctx.lineCap = \"round\";           \/\/ \u7dda\u306e\u7aef\u70b9\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a  ->\u7403\u5f62<\/span>\r\nctx.shadowColor = \"black\";       \/\/ \u5f71\u306e\u8272\u3092\u8a2d\u5b9a             ->\u9ed2<\/span>\r\nctx.shadowBlur = 20;             \/\/ \u5f71\u306e\u30d6\u30e9\u30fc\u306e\u5ea6\u5408\u3044\u3092\u8a2d\u5b9a  ->20px<\/span><\/code><\/pre>\n<\/div>\n
\u00a0<\/span><\/strong>\u2464\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306b\u5bfe\u3057\u3066\u7dda\u3084\u77e9\u5f62\u306a\u3069\u3092\u63cf\u753b<\/span><\/strong>
\n\u30fb\u7dda\u306e\u63cf\u753b<\/strong><\/p>\n
\n
\/\/\u7dda\u306e\u63cf\u753b\r\nctx.beginPath();\r\nctx.moveTo(100, 150);\r\nctx.lineTo(200, 300);\r\nctx.stroke();<\/code><\/pre>\n<\/div>\n
\"\"<\/a><\/p>\n
\u30fb\u5857\u308a\u3064\u3076\u3057\u77e9\u5f62\u306e\u63cf\u753b<\/strong><\/p>\n
\n
\/\/\u5857\u308a\u3064\u3076\u3057\u77e9\u5f62\u306e\u63cf\u753b\r\nctx.fillRect(250,100,150,200);<\/code><\/pre>\n<\/div>\n
\"\"<\/a><\/p>\n
\u30fb\u7dda\u3067\u77e9\u5f62\u3092\u63cf\u753b<\/strong><\/p>\n
\n
\/\/\u7dda\u3067\u77e9\u5f62\u3092\u63cf\u753b\r\nctx.strokeRect(250,100,150,200);<\/code><\/pre>\n<\/div>\n
\"\"<\/a><\/p>\n
\u69d8\u3005\u306a\u56f3\u5f62\u306e\u63cf\u753b\u306e\u89e3\u8aac<\/h3>\n
\u2460\u76f4\u7dda\u3001\u591a\u89d2\u5f62<\/span>
\n<\/strong>\u76f4\u7dda\u3084\u591a\u89d2\u5f62\u3092\u63cf\u753b\u3059\u308b\u305f\u3081\u306b\u30e1\u30bd\u30c3\u30c9\uff0c\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002\u30d1\u30b9\u3092\u521d\u671f\u5316\u3057\u3066\u3044\u306a\u3044\u30d1\u30b9\u3092\u9589\u3058\u3066\u3044\u306a\u3044\u305f\u3081\u601d\u3063\u305f\u63cf\u753b\u306b\u306a\u3089\u306a\u3044\u3053\u3068\u306f\u3088\u304f\u3042\u308b\u30df\u30b9\u306a\u306e\u3067\u7dda\u3092\u63cf\u753b\u3059\u308b\u3068\u304d\u306f\u3001\u5fc5\u305abeginPath()\u3092\u5b9f\u884c\u3059\u308b\u3088\u3046\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u30e1\u30bd\u30c3\u30c9\u30fb\u30d7\u30ed\u30d1\u30c6\u30a3<\/td>\n\u89e3\u8aac<\/td>\n<\/tr>\n
bebinPath()<\/td>\n\u30d1\u30b9\u3092\u521d\u671f\u5316\u3059\u308b<\/td>\n<\/tr>\n
moveTo(x, y)<\/td>\n(x,y)\u5ea7\u6a19\u306b\u7b46\u3092\u304a\u308d\u3059<\/td>\n<\/tr>\n
lineTo(x, y)<\/td>\n(x,y)\u5ea7\u6a19\u306b\u7b46\u3092\u52d5\u304b\u3059<\/td>\n<\/tr>\n
closePath()<\/td>\n\u30d1\u30b9\u3092\u30af\u30ea\u30a2\u3059\u308b\u9589\u3058\u308b(\u7b46\u3092\u59cb\u70b9\u306b\u3042\u308f\u305b\u308b)<\/td>\n<\/tr>\n
stroke()<\/td>\n\u7b46\u304c\u52d5\u3044\u305f\u8ecc\u8de1\u3092\u7dda\u3068\u3057\u3066\u63cf\u304f<\/td>\n<\/tr>\n
fill()<\/td>\n\u7b46\u304c\u52d5\u3044\u305f\u8ecc\u8de1\u306e\u7bc4\u56f2\u3092\u5857\u308a\u3064\u3076\u3059<\/td>\n<\/tr>\n
storokeStyle<\/td>\n\u7dda\u3092\u63cf\u753b\u3059\u308b\u8272\u3092\u6307\u5b9a\u3059\u308b<\/td>\n<\/tr>\n
fillStyle<\/td>\n\u5857\u308a\u3064\u3076\u3057\u306e\u8272\u3092\u6307\u5b9a\u3059\u308b<\/td>\n<\/tr>\n
lineWidth<\/td>\n\u7dda\u306e\u5e45\u3092\u6307\u5b9a\u3059\u308b<\/td>\n<\/tr>\n
lineCap<\/td>\n\u7dda\u306e\u7d42\u7aef\u306e\u5f62\u72b6\u3092\u6307\u5b9a\u3059\u308b butt, round, square<\/td>\n<\/tr>\n
shadowColor<\/td>\n\u5f71\u306e\u8272<\/td>\n<\/tr>\n
shadowBlur<\/td>\n\u5f71\u306b\u9069\u7528\u3059\u308b\u30dc\u30ab\u30b7\u306e\u7bc4\u56f2<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u4e0a\u8a18\u306e\u30e1\u30bd\u30c3\u30c9\u30fb\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3044\u3001\u30d1\u30b9\u3092\u9589\u3058\u305f\u5834\u5408\u3001\u9589\u3058\u306a\u304b\u3063\u305f\u5834\u5408\u3001\u305d\u308c\u305e\u308c\u3092\u5857\u308a\u3064\u3076\u3057\u3001\u8ecc\u8de1\u3067\u66f8\u3044\u305f4\u30d1\u30bf\u30fc\u30f3\u306e\u4e09\u89d2\u5f62\u3092\u63cf\u753b\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n
\n
<body>\r\n\u00a0 \u00a0 <canvas id=\"canvas\" width=\"500\" height=\"150\"><\/canvas>\r\n\u00a0 \u00a0 <script type=\"text\/javascript\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"use strict\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 let ctx = null;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 window.onload = function(){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const canvas = document.getElementById(\"canvas\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx = canvas.getContext(\"2d\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeStyle = \"red\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fillStyle = \"blue\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineWidth = 3;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 drawTriangle(100, 25, false, false);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 drawTriangle(200, 25, true, false);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 drawTriangle(300, 25, false, true);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 drawTriangle(400, 25, true, true);\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 function drawTriangle(x, y, close, fill){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.moveTo(x, y);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineTo(x+40, y+100);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineTo(x-40, y+100);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if(close){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.closePath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }else{\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/do Nothing\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if(fill){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fill();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }else{\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.stroke();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 <\/script>\r\n<\/body><\/code><\/pre>\n<\/div>\n
\u63cf\u753b\u3057\u305f\u4e09\u89d2\u5f62
\n\"\"<\/a><\/p>\n

\n\u2461\u77e9\u5f62<\/span>
\n<\/strong>\u77e9\u5f62\u3092\u63cf\u753b\u3059\u308b\u305f\u3081\u306b\u30e1\u30bd\u30c3\u30c9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002\u77e9\u5f62\u3067\u306f\u30d1\u30b9\u3092\u4f7f\u7528\u3057\u306a\u3044\u306e\u3067\uff0cbeginPath(), closePath()\u306f\u4e0d\u8981\u3067\u3059\u3002<\/p>\n\n\n\n\n\n\n
\u30e1\u30bd\u30c3\u30c9<\/td>\n\u89e3\u8aac<\/td>\n<\/tr>\n
strokeRect(x, y, width, height)<\/td>\n(x, y)\u3092\u5de6\u4e0a\u9685\u3068\u3057\u3066\u3001\u5e45w\uff0c\u9ad8\u3055h\u306e\u77e9\u5f62\u3092\u7dda\u3067\u63cf\u304f<\/td>\n<\/tr>\n
fillRect(x, y, width, height)<\/td>\n(x, y)\u3092\u5de6\u4e0a\u9685\u3068\u3057\u3066\u3001\u5e45w\uff0c\u9ad8\u3055h\u306e\u5857\u308a\u3064\u3076\u3057\u77e9\u5f62\u3092\u63cf\u304f<\/td>\n<\/tr>\n
clearRect(x, y, width, height)<\/td>\n(x, y)\u3092\u5de6\u4e0a\u9685\u3068\u3057\u3066\u3001\u5e45w\uff0c\u9ad8\u3055h\u306e\u77e9\u5f62\u30a8\u30ea\u30a2\u3092\u524a\u9664\u3059\u308b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u4e0a\u8a18\u306e\u30e1\u30bd\u30c3\u30c9\u30fb\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3044\u3001\u7dda\u3067\u66f8\u3044\u305f\u77e9\u5f62\uff0c\u5857\u308a\u3064\u3076\u3057\u305f\u77e9\u5f62\uff0c\u5857\u308a\u3064\u3076\u3057\u305f\u77e9\u5f62\u3092clearRect()\u3067\u304f\u308a\u629c\u3044\u305f3\u3064\u306e\u77e9\u5f62\u3092\u63cf\u3044\u3066\u307f\u307e\u3059\u3002<\/p>\n
\n
<body>\r\n\u00a0 \u00a0 <canvas id=\"canvas\" width=\"500\" height=\"150\"><\/canvas>\r\n\u00a0 \u00a0 <script type=\"text\/javascript\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"use strict\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 let ctx = null;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 window.onload = function(){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const canvas = document.getElementById(\"canvas\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx = canvas.getContext(\"2d\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeStyle = \"red\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fillStyle = \"blue\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineWidth = 3;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 drawRectangle(100, 25, false);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 drawRectangle(200, 25, true);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 drawRectangle(300, 25, true);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 clearRectangle(310, 50);\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 function drawRectangle(x, y, fill){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if(fill){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fillRect(x,y,80,100);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }else{\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeRect(x,y,80,100);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 function clearRectangle(x,y){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.clearRect(x,y,50,50);\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 <\/script>\r\n<\/body><\/code><\/pre>\n<\/div>\n
\u63cf\u753b\u3057\u305f\u77e9\u5f62
\n\"\"<\/a><\/p>\n
\u2462\u5186\u30fb\u5f27<\/span><\/strong>
\n\u5186\u5f27\u3092\u63cf\u753b\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u306f\u4ee5\u4e0b\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002
\narc\u306fPath\u3092\u66f8\u304f\u30e1\u30bd\u30c3\u30c9\u306a\u306e\u3067\u3001beginPath()\u3067\u306ePath\u306e\u521d\u671f\u5316\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002\u307e\u305f\u3001\u30d1\u30b9\u3092\u9589\u3058\u305f\u5f8c\u3001\u6700\u5f8c\u306bstroke()\u304bfill()\u3067\u63cf\u753b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
\n
arc(x, y, \"\u534a\u5f84(px)\", \"\u958b\u59cb\u3059\u308b\u89d2\u5ea6(rad)\", \"\u7d42\u4e86\u3059\u308b\u89d2\u5ea6(rad)\", \"\u56de\u8ee2\u65b9\u5411(true:\u53cd\u6642\u8a08\u56de\u308a, false:\u6642\u8a08\u56de\u308a)\")<\/code><\/pre>\n<\/div>\n
\u203barc\u30e1\u30bd\u30c3\u30c9\u306e\u7b2c6\u5f15\u6570\u306f\u3001\u30c7\u30d5\u30a9\u30eb\u30c8false(\u6642\u8a08\u56de\u308a)\u3068\u306a\u3063\u3066\u3044\u3066\u4f55\u3082\u66f8\u304b\u306a\u3044\u3068\u30c7\u30d5\u30a9\u30eb\u30c8\u306efalse\u304c\u63a1\u7528\u3055\u308c\u307e\u3059\u3002
\n\"\"<\/a><\/p>\n
\u4e0a\u8a18\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3044\u3001\u5b9f\u969b\u306barc()\u3092\u4f7f\u3063\u3066\u5186\u5f27\u3092\u3044\u304f\u3064\u304b\u3092\u63cf\u3044\u3066\u307f\u307e\u3059\u3002<\/p>\n
\n
<body>\r\n\u00a0 \u00a0 <canvas id=\"canvas\" width=\"1000\" height=\"150\"><\/canvas>\r\n\u00a0 \u00a0 <script type=\"text\/javascript\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"use strict\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 let ctx = null;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 window.onload = function(){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const canvas = document.getElementById(\"canvas\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx = canvas.getContext(\"2d\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeStyle = \"red\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fillStyle = \"blue\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineWidth = 3;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u2460\u5186\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.arc(100, 75, 50, 0, 2*Math.PI);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.closePath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.stroke();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u2461\u6247\u5f62\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.moveTo(250, 75);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.arc(250, 75, 50, -5\/6*Math.PI, -1\/6*Math.PI);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.closePath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fill();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u2463\u534a\u6642\u8a08\u56de\u308a\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.moveTo(400, 75);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.arc(400, 75, 50, -5\/6*Math.PI, -1\/6*Math.PI, true);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.closePath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fill();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u2464\u5186\u5f27\u306e\u307f\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.arc(550, 75, 50, -3\/4*Math.PI, 0);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.stroke();\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 <\/script>\r\n<\/body><\/code><\/pre>\n<\/div>\n
\u63cf\u753b\u3057\u305f\u5186\u5f27
\n\"\"<\/a>
\n<\/span><\/strong><\/p>\n
\u2463\u6587\u5b57
\n<\/span><\/strong>\u6587\u5b57\u3092\u63cf\u753b\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u306f\u4ee5\u4e0b\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n\n\n
\u30e1\u30bd\u30c3\u30c9<\/td>\n\u89e3\u8aac<\/td>\n<\/tr>\n
strokeText(text, x, y)<\/td>\n(x, y)\u3092\u30c6\u30ad\u30b9\u30c8\u306e\u5de6\u4e0b\u9685\u3068\u3057\u3066\u3001text\u306e\u8f2a\u90ed\u3092\u63cf\u304f<\/td>\n<\/tr>\n
fillText(text, x, y)<\/td>\n(x, y)\u3092\u30c6\u30ad\u30b9\u30c8\u306e\u5de6\u4e0b\u9685\u3068\u3057\u3066\u3001\u5857\u308a\u3064\u3076\u3057text\u3092\u63cf\u304f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u4e0a\u8a18\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3044\u3001\u5b9f\u969b\u306b\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u6587\u5b57\u3092\u63cf\u3044\u3066\u307f\u307e\u3059\u3002<\/p>\n
\n
<body>\r\n\u00a0 \u00a0 <canvas id=\"canvas\" width=\"500\" height=\"250\" style=\"background-color: lightgray;\"><\/canvas>\r\n\r\n\u00a0 \u00a0 <script type=\"text\/javascript\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"use strict\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 let ctx = null;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 window.onload = function(){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const canvas = document.getElementById(\"canvas\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx = canvas.getContext(\"2d\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u6587\u5b57\u30b5\u30a4\u30b9\u3068\u30d5\u30a9\u30f3\u30c8\u306e\u8a2d\u5b9a\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.font = \"40px 'Century'\";\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u6587\u5b57\u8f2a\u90ed\u306e\u30ab\u30e9\u30fc\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeStyle = \"blue\";\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/strokeText\u3067\u306e\u6587\u5b57\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeText(\"Hello World!\", 30, 100);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u6587\u5b57\u5857\u308a\u3064\u3076\u3057\u306e\u30ab\u30e9\u30fc\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fillStyle = \"red\";\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/fillText\u3067\u306e\u6587\u5b57\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fillText(\"Vanishment this world!\", 30, 150);\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 <\/script>\r\n<\/body><\/code><\/pre>\n<\/div>\n
\u63cf\u753b\u3057\u305f\u6587\u5b57
\n\"\"<\/a>
\n\u2464\u753b\u50cf<\/span><\/strong>
\n\u753b\u50cf\u3092\u63cf\u753b\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u306f\u4ee5\u4e0b\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n\n
\u30e1\u30bd\u30c3\u30c9<\/td>\n\u89e3\u8aac<\/td>\n<\/tr>\n
drawImage(image, x, y, w, h)<\/td>\n\u3092\u5de6\u4e0a\u9685\u3068\u3057\u3066\u3001w,h\u306e\u30b5\u30a4\u30ba\u3067image\u3092\u63cf\u753b\u3059\u308b
\n\u203bw,h\u3092\u7701\u7565\u3057\u305f\u5834\u5408\u3001\u5143\u30b5\u30a4\u30ba\u3067\u8868\u793a\u3055\u308c\u308b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u4e0a\u8a18\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3044\u3001\u5b9f\u969b\u306b\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u753b\u50cf\u3092\u63cf\u3044\u3066\u307f\u307e\u3059\u3002
\n(\u4f7f\u7528\u3057\u305f\u753b\u50cf 100px*100px)
\n\"\"<\/a><\/p>\n
\n
<body>\r\n\u00a0 \u00a0 <canvas id=\"canvas\" width=\"500\" height=\"500\" style=\"background-color: lightgray;\"><\/canvas>\r\n\u00a0 \u00a0 <img id=\"user1\" src=\"img\/user1.png\" style=\"display:none;\"\/>\r\n\u00a0 \u00a0 <img id=\"user2\" src=\"img\/user2.png\" style=\"display:none;\"\/>\r\n\u00a0 \u00a0 <img id=\"user3\" src=\"img\/user3.png\" style=\"display:none;\"\/>\r\n\r\n\u00a0 \u00a0 <script type=\"text\/javascript\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"use strict\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 let ctx = null;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 window.onload = function(){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const user1 = document.getElementById(\"user1\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const user2 = document.getElementById(\"user2\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const user3 = document.getElementById(\"user3\");\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const canvas = document.getElementById(\"canvas\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx = canvas.getContext(\"2d\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.drawImage(user1,30,30);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.drawImage(user2,150,30,70,100);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.drawImage(user3,30,150,330,200);\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 <\/script>\r\n<\/body><\/code><\/pre>\n<\/div>\n
\u63cf\u753b\u3057\u305f\u753b\u50cf
\n\"\"<\/p>\n
\u5ea7\u6a19\u7cfb\u306e\u8a2d\u5b9a<\/h3>\n
\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u306f\u3001\u5ea7\u6a19\u7cfb\u3092\u5909\u66f4\u3059\u308b\u3068\u3044\u3046\u6a5f\u80fd\u3082\u6e96\u5099\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u3063\u3066\u4f8b\u3048\u3070\u6642\u8a08\u306e\u3088\u3046\u306a\u56de\u8ee2\u3059\u308b\u56f3\u5f62\u3082\u5bb9\u6613\u306b\u63cf\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\n\u4f8b\u3048\u3070\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u56f3\u5f62\u3092\u5bb9\u6613\u306b\u63cf\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\n\"\"<\/p>\n
\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u3082\u306e\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\n
<body>\r\n\u00a0 \u00a0 <canvas id=\"canvas\" width=\"500\" height=\"500\" style=\"background-color: lightgray;\"><\/canvas>\r\n\u00a0\r\n\u00a0 \u00a0 <script type=\"text\/javascript\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"use strict\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 let ctx = null;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 window.onload = function(){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const canvas = document.getElementById(\"canvas\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx = canvas.getContext(\"2d\");\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u3057\u3066\u3001\u8272\u3068\u592a\u3055\u3092\u8a2d\u5b9a\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeStyle = \"red\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineWidth = 5;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 for(let i=0; i<=6; i++){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 let angle = Math.PI \/ 6 * i;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u72b6\u614b\u3092\u4fdd\u5b58\u3059\u308b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.save();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ (250, 250)\u306e\u4f4d\u7f6e\u306b\u79fb\u52d5\u3057\u3001\u305d\u3053\u3092\u3092\u539f\u70b9\u306b\u8a2d\u5b9a\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.translate(250,250);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092angle(rad)\u56de\u8ee2\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.rotate(angle);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.moveTo(0,-200);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineTo(0, -180);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.stroke();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ctx.save()\u3067\u4fdd\u5b58\u3057\u305f\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u72b6\u614b\u3092\u5fa9\u5143\u3059\u308b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.restore();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 <\/script>\r\n<\/body><\/code><\/pre>\n<\/div>\n
\u4e0a\u8a18\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u624b\u9806\u3067for\u6587\u3067\u5f90\u3005\u306b\u56de\u8ee2\u3055\u305b\u306a\u304c\u3089\u63cf\u753b\u3092\u884c\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n
\"\"<\/p>\n
\u5b9f\u969b\u306b\u7c21\u5358\u306a\u30a2\u30d7\u30ea\u3092\u3064\u304f\u3063\u3066\u307f\u3088\u3046<\/h3>\n
\u4e0a\u8a18\u306b\u7d39\u4ecb\u3057\u305f\u624b\u6cd5\u3092\u4f7f\u3063\u3066\u3001\u7c21\u5358\u306a\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002JavaScript\u306b\u81ea\u4fe1\u306e\u3042\u308b\u65b9\u306f\u6f14\u7fd2\u554f\u984c\u306e\u3064\u3082\u308a\u3067\u30b3\u30fc\u30c9\u898b\u305a\u306b\u4f5c\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u2460\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30a2\u30ca\u30ed\u30b0\u6642\u8a08\u3092\u4f5c\u3063\u3066\u307f\u3088\u3046<\/strong>
\n<\/canvas>
\nTIME<\/span><\/p>\n
\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/p>\n
\n
<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n<head>\r\n\u00a0 \u00a0 <meta charset=\"UTF-8\">\r\n\u00a0 \u00a0 <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\u00a0 \u00a0 <title>AnalogWatch<\/title>\r\n<\/head>\r\n<body>\r\n\u00a0 \u00a0 <canvas id=\"canvas\" width=\"500\" height=\"500\" style=\"background-color: lightgray;\"><\/canvas>\r\n\u00a0 \u00a0 <p id=\"time\"><\/p>\r\n\u00a0\r\n\u00a0 \u00a0 <script type=\"text\/javascript\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"use strict\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 let ctx = null;\r\n\u00a0 \u00a0 \u00a0 \u00a0 const canvas = document.getElementById(\"canvas\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 let timerId = NaN;\r\n\u00a0 \u00a0 \u00a0 \u00a0 const time = document.getElementById(\"time\");\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 window.onload = function(){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 drawScale();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 timerId = setInterval(tick,1000);\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 function drawScale(){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u5b9a\u7fa9\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx = canvas.getContext(\"2d\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u76ee\u76db\u308a\u306e\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 for(let i=0; i<=59; i++){\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 let angle = Math.PI \/ 30 * i;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u3057\u3066\u3001\u8272\u3068\u592a\u3055\u3092\u8a2d\u5b9a\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeStyle = \"black\";\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ ctx.save()\u306f\u3001\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u72b6\u614b\u3092\u4fdd\u5b58\u3059\u308b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.save();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if(i%5 == 0){\/\/5\u5206\u76ee\u76db\u308a \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u4e2d\u5fc3\u5ea7\u6a19\u306e\u79fb\u52d5\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.translate(250,250);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u5ea7\u6a19\u306e\u56de\u8ee2\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.rotate(angle);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineCap = \"squire\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineWidth = 5;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.moveTo(0,-200);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineTo(0, -180);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.stroke();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ctx.save()\u3067\u4fdd\u5b58\u3057\u305f\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u72b6\u614b\u3092\u5fa9\u5143\u3059\u308b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.restore();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }else{\/\/1\u5206\u76ee\u76db\u308a\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u4e2d\u5fc3\u5ea7\u6a19\u306e\u79fb\u52d5\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.translate(250,250);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u5ea7\u6a19\u306e\u56de\u8ee2\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.rotate(angle);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineCap = \"squire\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineWidth = 3;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.moveTo(0,-200);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineTo(0, -195);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.stroke();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ctx.save()\u3067\u4fdd\u5b58\u3057\u305f\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u72b6\u614b\u3092\u5fa9\u5143\u3059\u308b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.restore();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 function tick(){ \u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u6642\u9593\u306e\u53d6\u5f97\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 let now = new Date();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 let hours = now.getHours() % 12;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 let minutes = now.getMinutes();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 let seconds = now.getSeconds();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 time.textContent = now;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u5b9a\u7fa9\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx = canvas.getContext(\"2d\");\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u63cf\u753b\u9818\u57df\u306e\u30af\u30ea\u30a2\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fillStyle = \"lightgray\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.fillRect(0,0,500,500);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u76ee\u76db\u308a\u306e\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 drawScale();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u9577\u91dd\u306e\u63cf\u753b\u8a2d\u5b9a\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.save();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.translate(250,250);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.rotate((minutes * Math.PI\/30)+(Math.PI\/30 * seconds\/60));\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeStyle = \"black\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineWidth = 5;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineCap = \"round\";\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u9577\u91dd\u306e\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.moveTo(0,20);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineTo(0,-190);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.stroke();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.restore();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u77ed\u91dd\u306e\u63cf\u753b\u8a2d\u5b9a\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.save();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.translate(250,250);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.rotate((hours * Math.PI\/6) + (Math.PI\/6 * minutes\/60));\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeStyle = \"black\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineWidth = 8;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineCap = \"round\";\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u77ed\u91dd\u306e\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.moveTo(0,10);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineTo(0,-170);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.stroke();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.restore();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u79d2\u91dd\u306e\u63cf\u753b\u8a2d\u5b9a\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.save();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.translate(250,250);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.rotate(seconds * Math.PI\/30);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.strokeStyle = \"red\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineWidth = 3;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/\u79d2\u91dd\u306e\u63cf\u753b\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.beginPath();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.moveTo(0,30);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.lineTo(0,-180);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.stroke();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ctx.restore();\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 <\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n
\u2461\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u304a\u7d75\u63cf\u304d\u3067\u304d\u308bCanvas\u3092\u4f5c\u6210\u3057\u3066\u307f\u3088\u3046
\n(\u30de\u30a6\u30b9\u3092\u30c9\u30e9\u30c3\u30af&\u30e0\u30fc\u30d6\u3059\u308b\u3068\u304a\u7d75\u63cf\u304d\u3067\u304d\u307e\u3059)<\/strong>
\n<\/canvas>
\n