{"id":107449,"date":"2020-09-16T09:55:44","date_gmt":"2020-09-16T00:55:44","guid":{"rendered":"http:\/\/www.key-p.com\/blog\/staff\/?p=107449"},"modified":"2020-09-24T14:01:09","modified_gmt":"2020-09-24T05:01:09","slug":"canvas%e3%81%a7%e6%99%82%e8%a8%88%e3%82%92%e4%bd%9c%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.key-p.com\/blog\/staff\/archives\/107449","title":{"rendered":"canvas\u3067\u6642\u8a08\u3092\u4f5c\u308b"},"content":{"rendered":"<p>\n<p>\n\u958b\u767a\u90e8\u306e\u67f3\u4e95\u3067\u3059\u3002with\u30b3\u30ed\u30ca\u3067\u5927\u5909\u306a\u72b6\u6cc1\u304c\u7d9a\u3044\u3066\u3044\u307e\u3059\u304c\u3001\u5f0a\u793e\u3067\u306f<a href=\"https:\/\/twitter.com\/keyp_recruit\/status\/1301338371961229312\">\u30ea\u30e2\u30fc\u30c8\u30ef\u30fc\u30af\u306a\u3069\u306e\u30b3\u30ed\u30ca\u5bfe\u7b56<\/a>\u3092\u3057\u306a\u304c\u3089\u3001\u30b5\u30fc\u30d3\u30b9\u3092\u63d0\u4f9b\u3057\u7d9a\u3051\u3066\u3044\u307e\u3059\u3002\u51fa\u793e\u3057\u3066\u308b\u6642\u306f<a href=\"https:\/\/www.key-p.com\/blog\/staff\/archives\/106414\">34\u30a4\u30f3\u30c1\u306e\u66f2\u9762\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4<\/a>\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u81ea\u5b85\u306b\u306f\u7f6e\u304f\u5834\u6240\u304c\u7121\u3044\u305f\u3081\u3001\u4ee3\u308f\u308a\u306b13.3\u30a4\u30f3\u30c1\u306e\u30e2\u30d0\u30a4\u30eb\u30e2\u30cb\u30bf\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059(mac\u306f13\u30a4\u30f3\u30c1)(\u7d4c\u8cbb\u3067\u88dc\u52a9\u304c\u51fa\u307e\u3057\u305f\uff01)\u3002<br \/>\n<\/p>\n<p>\n\u3055\u3066\u672c\u984c\u3067\u3059\u304c\u3001\u4eca\u56de\u306fcanvas\u3067\u6642\u8a08\u3092\u4f5c\u308a\u307e\u3059\u3002\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\u3082\u5f8c\u306e\u65b9\u3067\u3084\u308a\u307e\u3059\u304c\u3001\u6642\u9593\u3092\u53d6\u5f97\u3057\u3066\u6570\u5b57\u3092\u8868\u793a\u3059\u308b\u3060\u3051\u306a\u306e\u3067\u3001\u30e1\u30a4\u30f3\u306f\u30a2\u30ca\u30ed\u30b0\u6642\u8a08\u3067\u3059\u3002\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306b\u306f<a href=\"https:\/\/www.key-p.com\/blog\/staff\/archives\/107334\">\u524d\u56de<\/a>\u306fCodePen\u3092\u4f7f\u3044\u307e\u3057\u305f\u304c\u3001<a href=\"https:\/\/www.key-p.com\/blog\/staff\/archives\/107420\">\u30e2\u30d6\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0<\/a>\u306e\u6642\u306b\u77e5\u3063\u305fRepl.it\u3092\u4f7f\u3044\u307e\u3059\u3002\u30d8\u30c3\u30c0\u30fc\u306a\u3069\u304c\u7121\u3044\u306e\u3067\u3059\u3063\u304d\u308a\u3057\u3066\u307e\u3059\u3002<br \/>\n<\/p>\n<h3>canvas\u3068\u306f<\/h3>\n<p>\n<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/API\/Canvas_API\" rel=\"noopener noreferrer\" target=\"_blank\">canvas<\/a>\u306fHTML5\u3067\u8ffd\u52a0\u3055\u308c\u305f\u8981\u7d20\u3067\u3001\u56f3\u5f62\u3092\u63cf\u753b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u4f3c\u305f\u3088\u3046\u306a\u6280\u8853\u306b<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/SVG\" rel=\"noopener noreferrer\" target=\"_blank\">SVG<\/a>\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u3061\u3089\u306f&lt;svg&gt;\u8981\u7d20\u306e\u4e2d\u306b&lt;circle&gt;\u306a\u3069\u3092\u66f8\u3044\u3066\u3044\u304d\u307e\u3059\u3002\u5b9f\u969b\u306b\u81ea\u5206\u304c\u643a\u308f\u3063\u3066\u3044\u308b\u6848\u4ef6\u3067\u3082\u3001\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316\u306b<a href=\"https:\/\/d3js.org\/\" rel=\"noopener noreferrer\" target=\"_blank\">D3.js<\/a>\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u4eca\u56de\u306fcanvas\u3067\u300c\u5186\u3092\u63cf\u304f\u300d\u3068\u304b\u300c\u7dda\u3092\u5f15\u304f\u300d\u3068\u3044\u3046\u30e1\u30bd\u30c3\u30c9\u3092\u66f8\u3044\u3066\u3044\u304f\u65b9\u6cd5\u3092\u4f7f\u3044\u307e\u3059\u3002<br \/>\n<\/p>\n<p>\n\u4eca\u56de\u306f\u3001\u9ad8\u6821\u306e\u6570\u5b66\u2161(\uff1f)\u3067\u3084\u3063\u305f\u3001\u4e09\u89d2\u95a2\u6570\u3092\u4f7f\u3044\u307e\u3059\u3002\u5fd8\u308c\u305f\u4eba\u306f<a href=\"https:\/\/note.com\/shosekiya\/n\/ne1810990a27f\" rel=\"noopener noreferrer\" target=\"_blank\">\u3053\u3061\u3089\u306e\u3088\u3046\u306a\u30b5\u30a4\u30c8<\/a>\u3067\u5fa9\u7fd2\u3057\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n<\/p>\n<hr \/><br \/>\n<p>\n<a href=\"https:\/\/repl.it\/@KPYanai\/canvas-practise-analogue-wallclock-1\" rel=\"noopener noreferrer\" target=\"_blank\">\u7b2c\u4e00\u6bb5\u968e<\/a>\u3002\u771f\u3093\u4e2d\u306b\u30a8\u30c7\u30a3\u30bf\u3001\u53f3\u306b\u5b9f\u884c\u7d50\u679c\u3001\u5de6\u306b\u30d5\u30a1\u30a4\u30eb\u4e00\u89a7\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u304c\u3001\u5358\u4f53\u3067\u958b\u304f\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<br \/>\n<img src=\"http:\/\/www.key-p.com\/blog\/staff\/wp-content\/uploads\/2020\/09\/canvas\u3066\u3099\u6642\u8a08\u3092\u63cf\u304f_0_Repl.it_.png\" alt=\"\" width=\"600\" class=\"alignnone wp-image-107464\" \/>\n<\/p>\n<h3>\u67a0<\/h3>\n<p>\n\u307e\u305a\u306f\u6642\u8a08\u306e\u67a0\u3068\u3057\u3066\u5186\u3092\u63cf\u304d\u307e\u3059\u3002<br \/>\n<\/p>\n<pre class=\"lang:default decode:true \" title=\"index.html\" >&lt;canvas id=\"canvas\" width=\"400\" height=\"400\" style=\"border: solid;\"&gt;&lt;\/canvas&gt;<\/pre>\n<pre class=\"lang:js decode:true \" title=\"script.js\" >function draw() {\n  const board = document.querySelector(\"#canvas\");\n  const canvasWidth = canvasHeight = 400;\n  const context = board.getContext(\"2d\");\n\n  \/\/ \u8272\n  const colorRed = \"#FF0000\";\n  const colorBlack = \"#000000\";\n\n  \/\/ \u67a0\n  const flameR = canvasWidth \/ 2.5;\n  const flameLineWidth = 3;\n\n  \/\/ \u7565\n\n  \/\/ \u63cf\u753b\u958b\u59cb\n  context.clearRect(0, 0, canvasWidth, canvasHeight);\n\n  \/\/ \u67a0\n  context.beginPath();\n  context.strokeStyle = colorBlack;\n  context.lineWidth = flameLineWidth;\n  context.arc(canvasWidth \/ 2, canvasHeight \/ 2, flameR, 0, Math.PI * 2, true);\n  context.stroke();<\/pre>\n<p>\ncanvas\u3067\u306e\u63cf\u753b\u306f\u3001\u63cf\u753b\u7528\u306e\u30a8\u30ea\u30a2\u3092\u7528\u610f\u3057\u3066\u304b\u3089\u3001beginPath()\u2192\u5186\u306a\u3069\u56f3\u5f62\u306e\u70b9\u30fb\u30d1\u30b9(\u7d4c\u8def)\u3092\u6307\u5b9a\u3059\u308b\u2192\u5b9f\u969b\u306bstroke()\u307e\u305f\u306ffill()\u3067\u63cf\u304f\u3068\u3044\u3046\u6d41\u308c\u3067\u3059\u3002draw()\u3067\u306f\u6700\u521d\u306bclearRect()\u3067canvas\u3092\u30af\u30ea\u30a2\u3057\u307e\u3059\u3002\u7b2c\u4e00\u30fb\u7b2c\u4e8c\u6bb5\u968e\u3067\u306f\u3057\u3066\u3044\u307e\u305b\u3093\u304c\u3001draw()\u306f\u30bf\u30a4\u30de\u30fc\u30671\u79d2\u306b1\u56de\u63cf\u753b\u3057\u76f4\u3059\u306e\u3067\u6700\u521d\u306b\u30af\u30ea\u30a2\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n<\/p>\n<p>\n\u5186\u5f27\u3092\u63cf\u304farc()\u3067\u306f\u4e2d\u5fc3\u306ex\u5ea7\u6a19\u3001y\u5ea7\u6a19\u3001\u534a\u5f84\u3001\u4f55\u5ea6\u304b\u3089\u4f55\u5ea6\u307e\u3067\u3001\u6642\u8a08\u56de\u308aor\u53cd\u6642\u8a08\u56de\u308a\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002360\u5ea6(=2\u03c0)\u306a\u306e\u3067\u6df1\u304f\u8003\u3048\u305a\u306b\u63cf\u3051\u3070\u826f\u3044\u3067\u3059\u3002\u8a73\u3057\u304f\u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u898b\u3066\u304f\u3060\u3055\u3044\u3002\u5ea7\u6a19\u3092\u6307\u5b9a\u3057\u3066\u3001\u3069\u306e\u304f\u3089\u3044\u306e\u592a\u3055\u30fb\u8272\u3067\u63cf\u753b\u3059\u308b\u304b\u3092\u6307\u5b9a\u3059\u308b\u65b9\u6cd5\u306f\u3001canvas(JavaScript)\u3060\u3051\u3067\u306a\u304f<a href=\"https:\/\/dxlib.xsrv.jp\/\" rel=\"noopener noreferrer\" target=\"_blank\">DX\u30e9\u30a4\u30d6\u30e9\u30ea<\/a>\u306a\u3069\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30b9\u63cf\u753b\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u306f\u3088\u304f\u3042\u308b\u30d1\u30bf\u30fc\u30f3\u306a\u306e\u3067\u3001\u6163\u308c\u308b\u3068\u7c21\u5358\u3067\u3059\u3002<br \/>\n<\/p>\n<ul>\n<li>\u77e9\u5f62(\u56db\u89d2\u5f62)\u3001\u5186\u306a\u3069\uff1a<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/Guide\/HTML\/Canvas_tutorial\/Drawing_shapes\" rel=\"noopener noreferrer\" target=\"_blank\">canvas \u306b\u56f3\u5f62\u3092\u63cf\u304f - \u958b\u767a\u8005\u30ac\u30a4\u30c9 | MDN<\/a><\/li>\n<li>\u7dda\u3084\u5857\u308a\u6f70\u3057\u306e\u8272\u3001\u592a\u3055\u306a\u3069\uff1a<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/Guide\/HTML\/Canvas_tutorial\/Applying_styles_and_colors\" rel=\"noopener noreferrer\" target=\"_blank\">\u30b9\u30bf\u30a4\u30eb\u3068\u8272\u3092\u9069\u7528\u3059\u308b - \u958b\u767a\u8005\u30ac\u30a4\u30c9 | MDN<\/a><\/li>\n<\/ul>\n<h3>\u76ee\u76db\u308a<\/h3>\n<p>\n\u76ee\u76db\u308a\u3068\u3044\u3046\u306e\u306f\u30011\u301c12\u306e\u76ee\u76db\u308a\u3068\u3001\u9593\u306b\u3042\u308b4\u672c\u306e\u76ee\u76db\u308a\u3067\u3059\u3002\u5148\u307b\u3069\u306f2\u03c0\u3092\u6307\u5b9a\u3057\u307e\u3057\u305f\u304c\u3001\u4eca\u5ea6\u306f2\u03c0\/60\u3054\u3068\u306b1\u672c\u306e\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u56f3\u306e\u3088\u3046\u306b\u3001\u5186\u306e\u4e2d\u5fc3\u304b\u3089\u5186\u306e\u7e01\u307e\u3067\u306e\u5f26\u306e90%\u7a0b\u5ea6\u306e\u70b9\u3092(A)\u3068\u3057\u3001\u305d\u3053\u304b\u3089\u5186\u306e\u7e01(B)\u307e\u3067\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<br \/>\n<\/p>\n<p>\n<img loading=\"lazy\" src=\"http:\/\/www.key-p.com\/blog\/staff\/wp-content\/uploads\/2020\/09\/canvas\u3066\u3099\u6642\u8a08\u3092\u63cf\u304f_1_needle.png\" alt=\"\" width=\"390\" height=\"383\" class=\"alignnone wp-image-107465\" \/>\n<\/p>\n<p>\n\u7dda\u306f\u3001\u30da\u30f3\u3092moveTo()\u3067\u59cb\u70b9(A)\u3078\u79fb\u52d5\u3055\u305b\u3001lineTo()\u3067\u7d42\u70b9(B)\u307e\u3067\u7dda\u3092\u5f15\u304f\u30a4\u30e1\u30fc\u30b8\u3067\u3059\u3002(A)\u3084(B)\u306e\u5ea7\u6a19\u3092\u6c7a\u3081\u308b\u306b\u306f\u30012\u03c0\/60 * n(n=0\u301c59\u306e\u6574\u6570)\u3092\u3092\u4f7f\u3048\u3070OK\u3067\u3059\u3002\u5358\u4f4d\u5186r=1\u3092\u4efb\u610f\u306e\u9577\u3055\u306b\u3057\u3001x\u5ea7\u6a19\u306b\u306fcos\u03b8\u3001y\u5ea7\u6a19\u306b\u306fsin\u03b8\u3092\u4f7f\u3044\u307e\u3057\u3087\u3046\u3002i\u306f\u3072\u3068\u307e\u305a10\u307e\u3067\u306b\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n<\/p>\n<pre class=\"lang:js decode:true \" title=\"script.js\" >function calcRadian(theta) {\n  return (Math.PI * 2) * theta;\n}\n\nfunction draw() {\n  \/\/ \u7565\n  \/\/ \u76ee\u76db\u308a\n  for (let i = 0; i &lt; 10; i++) {\n    context.beginPath();\n    context.strokeStyle = colorBlack;\n    if (i % 5 === 0) {\n      \/\/ 5\u5206\u523b\u307f\uff1a\u9577\u3044\u76ee\u76db\u308a\n      context.lineWidth = scaleLongWidth;\n      context.moveTo(canvasWidth \/ 2 + (Math.cos(calcRadian(i \/ 60)) * flameR) * scaleLongLength, canvasHeight \/ 2 + (Math.sin(calcRadian(i \/ 60)) * flameR) * scaleLongLength);\n    } else {\n      \/\/ \u305d\u308c\u4ee5\u5916\uff1a\u77ed\u3044\u76ee\u76db\u308a\n      context.lineWidth = scaleShortWidth;\n      context.moveTo(canvasWidth \/ 2 + (Math.cos(calcRadian(i \/ 60)) * flameR) * scaleShortLength, canvasHeight \/ 2 + (Math.sin(calcRadian(i \/ 60)) * flameR) * scaleShortLength);\n    }\n    context.lineTo(canvasWidth \/ 2 + (Math.cos(calcRadian(i \/ 60)) * flameR), canvasHeight \/ 2 + (Math.sin(calcRadian(i \/ 60)) * flameR));\n    context.stroke();\n  }<\/pre>\n<p>\n<img src=\"http:\/\/www.key-p.com\/blog\/staff\/wp-content\/uploads\/2020\/09\/canvas\u3066\u3099\u6642\u8a08\u3092\u63cf\u304f_2_calcRadian_before.png\" alt=\"\" width=\"300\" class=\"alignnone wp-image-107466\" \/>\n<\/p>\n<p>\n12\u6642\u304b\u3089\u59cb\u307e\u308b\u3068\u601d\u3063\u305f\u3089\u30013\u6642\u304b\u3089\u59cb\u307e\u308a\u307e\u3057\u305f\u306d\uff1fcanvas\u306exy\u5ea7\u6a19\u7cfb\u306f\u5de6\u4e0a\u304c0\u3067\u3001x\u306f\u53f3\u3001y\u306f\u4e0b\u3078+\u306b\u306a\u308a\u307e\u3059\u3002\u307e\u305f\u3001\u6570\u5b66\u306e\u4e09\u89d2\u95a2\u6570\u306f\u53cd\u6642\u8a08\u56de\u308a\u306a\u306e\u3067\u3001\u305d\u308c\u3089\u3092\u8003\u616e\u3059\u308b\u3068\u3001calcRadian()\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3059\u308b\u3068\u611f\u899a\u7684\u306b\u6271\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n<\/p>\n<pre class=\"lang:js decode:true \" title=\"script.js\" >  return (Math.PI * 2) * theta - Math.PI \/ 2;<\/pre>\n<p>\n<img src=\"http:\/\/www.key-p.com\/blog\/staff\/wp-content\/uploads\/2020\/09\/canvas\u3066\u3099\u6642\u8a08\u3092\u63cf\u304f_3_radius.png\" alt=\"\" width=\"600\" class=\"alignnone wp-image-107467\" \/>\n<\/p>\n<p>\n\u76ee\u76db\u308a\u3082\u3001\u67a0\u3068\u540c\u69d8\u306b2\u03c0\u4e00\u5468\u63cf\u304f\u306e\u3067\u3001\u3069\u3053\u304b\u3089\u958b\u59cb\u3057\u3066\u3069\u3063\u3061\u5468\u308a\u3067\u3082\u63cf\u3051\u307e\u3059\u304c\u3001\u3053\u3053\u3067\u30e9\u30b8\u30a2\u30f3\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3057\u3066\u304a\u304f\u3068\u5f8c\u304c\u697d\u3067\u3059\u3002<br \/>\n<\/p>\n<p>\n<img src=\"http:\/\/www.key-p.com\/blog\/staff\/wp-content\/uploads\/2020\/09\/canvas\u3066\u3099\u6642\u8a08\u3092\u63cf\u304f_4_calcRadian_after.png\" alt=\"\" width=\"300\" class=\"alignnone wp-image-107468\" \/>\n<\/p>\n<h3>\u6642\u91dd<\/h3>\n<p>\n\u91dd\u306f\u6642\u91dd\u3001\u5206\u91dd\u3001\u79d2\u91dd\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u307e\u305a\u6642\u91dd\u304b\u3089\u63cf\u304d\u307e\u3059\u300212\u6642\u9593\u306a\u306e\u3067\u30011\u6642\u9593\u30672\u03c0\/12\u52d5\u304d\u307e\u3059\u3002\u76ee\u76db\u308a\u306e\u63cf\u304d\u65b9\u3092\u771f\u4f3c\u3059\u308c\u3070\u4f59\u88d5\u3067\u3059\u306d\uff01\u4f8b\u3048\u307010\u664216\u520633\u5206\u306b\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br \/>\n<\/p>\n<pre class=\"lang:js decode:true \" title=\"script.js\" >  \/\/ \u73fe\u5728\u6642\u523b(\u4eee)\n  const hour = 10;\n  const minute = 16;\n  const second = 33;\n\n  \/\/ \u7565\n\n  \/\/ \u6642\u91dd(\u9593\u9055\u3044)\n  context.beginPath();\n  context.strokeStyle = colorBlack;\n  context.lineWidth = handHourWidth;\n  context.moveTo(canvasWidth \/ 2, canvasHeight \/ 2);\n  context.lineTo(canvasWidth \/ 2 + (Math.cos(calcRadian(hour \/ 12)) * flameR) * handHourLength, canvasHeight \/ 2 + (Math.sin(calcRadian(hour \/ 12)) * flameR) * handHourLength);\n  context.stroke();<\/pre>\n<p>\n<img src=\"http:\/\/www.key-p.com\/blog\/staff\/wp-content\/uploads\/2020\/09\/canvas\u3066\u3099\u6642\u8a08\u3092\u63cf\u304f_5_10\u6642.png\" alt=\"\" width=\"300\" class=\"alignnone wp-image-107469\" \/>\n<\/p>\n<hr \/><br \/>\n<p>\n\u3053\u3053\u304b\u3089<a href=\"https:\/\/repl.it\/@KPYanai\/canvas-practise-analogue-wallclock-2\" rel=\"noopener noreferrer\" target=\"_blank\">\u7b2c\u4e8c\u6bb5\u968e<\/a>\u3067\u3059\u3002<br \/>\n<\/p>\n<h3>\u5206\u91dd<\/h3>\n<p>\n\u6b21\u306f\u5206\u91dd\u300260\u5206\u306a\u306e\u3067\u30011\u5206\u306b2\u03c0\/60\u52d5\u304d\u307e\u3059\u3002hour \/ 12\u306e\u90e8\u5206\u3092minute \/ 60\u306b\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n<\/p>\n<p>\n<img src=\"http:\/\/www.key-p.com\/blog\/staff\/wp-content\/uploads\/2020\/09\/canvas\u3066\u3099\u6642\u8a08\u3092\u63cf\u304f_6_10\u664216\u5206.png\" alt=\"\" width=\"300\" class=\"alignnone wp-image-107470\" \/>\n<\/p>\n<p>\n\u306a\u3093\u304b\u9055\u548c\u611f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f10\u664259\u5206\u306b\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n<\/p>\n<p>\n<img src=\"http:\/\/www.key-p.com\/blog\/staff\/wp-content\/uploads\/2020\/09\/canvas\u3066\u3099\u6642\u8a08\u3092\u63cf\u304f_7_10\u664259\u5206.png\" alt=\"\" width=\"300\" class=\"alignnone wp-image-107471\" \/>\n<\/p>\n<p>\n11\u6642\u306b\u306a\u308b\u3068\u3001\u6642\u91dd\u304c\u3044\u304d\u306a\u308a2\u03c0\/12\u52d5\u3044\u3066\u3057\u307e\u3044\u307e\u3059\u3002\u6642\u91dd\u306f\u6b63\u3057\u304f\u306f\u30011\u6642\u9593\u30672\u03c0 * (hour + (minute \/ 60)\/12)\u52d5\u304f\u3088\u3046\u306b\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u306e\u3067\u3057\u305f\u3002\u3082\u3063\u3068\u3061\u3083\u3093\u3068\u3057\u305f\u3044\u65b9\u306fsecond\u3082\u5165\u308c\u3066\u3082\u3089\u3048\u3070\u3044\u3044\u3067\u3059\u304c\u3001\u753b\u9762\u3067\u305d\u3093\u306a\u306b\u898b\u3048\u308b\u3082\u306e\u3067\u306f\u306a\u3044\u306e\u3067\u3053\u3053\u3067\u306f\u7701\u3044\u3066\u3044\u307e\u3059\u3002<br \/>\n<\/p>\n<h3>\u79d2\u91dd<\/h3>\n<p>\n\u79d2\u91dd\u306f60\u79d2\u306a\u306e\u3067\u30011\u79d2\u306b2\u03c0\/60\u52d5\u304d\u307e\u3059\u3002\u3053\u308c\u3088\u308a\u5c0f\u3055\u3044\u6570\u5b57\u306f\u8003\u3048\u306a\u304f\u3066\u3044\u3044\u306e\u3067\u3001second \/ 60\u3060\u3051\u3067\u3059\u3002\u8272\u3084\u592a\u3055\u3092\u5909\u3048\u3066\u3053\u3093\u306a\u611f\u3058\u306b\u306a\u308a\u307e\u3057\u305f\u3002<br \/>\n<\/p>\n<pre class=\"lang:js decode:true \" title=\"script.js\" >  \/\/ \u79d2\u91dd\n  context.beginPath();\n  context.strokeStyle = colorRed;\n  context.lineWidth = handSecondWidth;\n  context.moveTo(canvasWidth \/ 2, canvasHeight \/ 2);\n  context.lineTo(canvasWidth \/ 2 + (Math.cos(calcRadian(second \/ 60)) * flameR) * handSecondLength, canvasHeight \/ 2 + (Math.sin(calcRadian(second \/ 60)) * flameR) * handSecondLength);\n  context.stroke();<\/pre>\n<p>\n<img src=\"http:\/\/www.key-p.com\/blog\/staff\/wp-content\/uploads\/2020\/09\/canvas\u3066\u3099\u6642\u8a08\u3092\u63cf\u304f_8_10\u664216\u520633\u79d2.png\" alt=\"\" width=\"300\" class=\"alignnone wp-image-107472\" \/>\n<\/p>\n<hr \/><br \/>\n<p>\n\u3053\u3053\u304b\u3089<a href=\"https:\/\/repl.it\/@KPYanai\/canvas-practise-analogue-wallclock-3\" rel=\"noopener noreferrer\" target=\"_blank\">\u7b2c\u4e09\u6bb5\u968e<\/a>(\u3053\u308c\u3067\u7d42\u308f\u308a)\u3067\u3059\u3002<br \/>\n<\/p>\n<h3>\u4ed5\u4e0a\u3052<\/h3>\n<p>\n\u73fe\u5728\u6642\u523b\u3092\u53d6\u5f97\u3057\u3001\u30bf\u30a4\u30de\u30fc\u30671\u79d2\u306b1\u56dedraw()\u3092\u5b9f\u884c\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002\u91dd\u304c\u4e2d\u5fc3\u3088\u308a\u53cd\u5bfe\u5074\u306b\u3082\u4f38\u3073\u3066\u3044\u308b(-r\u3068\u3057\u3066handSecondLength2)\u306a\u3069\u3092\u826f\u3044\u611f\u3058\u306b\u5b9f\u88c5\u3057\u3066\u5b8c\u6210\u3067\u3059\u3002\u8a73\u3057\u304f\u306f\u30b3\u30fc\u30c9\u3092\u8aad\u3093\u3067\u304f\u3060\u3055\u3044\u3002<br \/>\n<\/p>\n<h3>\u304a\u307e\u3051<\/h3>\n<p>\n\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\u3082\u4ed8\u3051\u3066\u307f\u307e\u3057\u305f\u3002\u53d6\u5f97\u3057\u305f\u6642\u30fb\u5206\u30fb\u79d2\u304c1\u6841\u306e\u5834\u5408\u306f<a href=\"https:\/\/tagamidaiki.com\/javascript-0-chink\/\" rel=\"noopener noreferrer\" target=\"_blank\">\"0\"\u306e\u6587\u5b57\u5217\u3068\u9023\u7d50\u3057\u30660\u57cb\u3081<\/a>\u3092\u3057\u307e\u3057\u3087\u3046\u3002\u30c7\u30b8\u30bf\u30eb\u3063\u307d\u3044\u30d5\u30a9\u30f3\u30c8\u306f\u3001<a href=\"https:\/\/www.keshikan.net\/fonts.html\" rel=\"noopener noreferrer\" target=\"_blank\">7\u30bb\u30b0\u30fb14\u30bb\u30b0\u30d5\u30a9\u30f3\u30c8 \u300cDSEG\u300d<\/a>\u3092\u4f7f\u7528\u3057\u307e\u3057\u305f\u3002<br \/>\n<\/p>\n<p>\n<img src=\"http:\/\/www.key-p.com\/blog\/staff\/wp-content\/uploads\/2020\/09\/canvas\u3066\u3099\u6642\u8a08\u3092\u63cf\u304f_9_17\u66421\u52068\u79d2.png\" alt=\"\" width=\"300\" class=\"alignnone wp-image-107473\" \/>\n<\/p>\n<h3>\u307e\u3068\u3081<\/h3>\n<p>\n\u300ccanvas \u6642\u8a08\u300d\u3067\u691c\u7d22\u3059\u308b\u3068\u305f\u304f\u3055\u3093\u8a18\u4e8b\u304c\u516c\u958b\u3055\u308c\u3066\u3044\u307e\u3059\u3002CSS\u306b\u51dd\u3063\u3066\u305f\u308a\u3059\u308b\u306e\u304c\u9762\u767d\u3044\u3067\u3059\u3002\u7686\u3055\u3093\u3082\u4f5c\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n<\/p>\n<br \/>\n<br \/>\n<a href=\"https:\/\/www.key-p.com\/recruit\/\" rel=\"noopener noreferrer\" target=\"_blank\">\u30ad\u30fc\u30fb\u30dd\u30a4\u30f3\u30c8\u3067\u306f\u3001\u3044\u308d\u3044\u308d\u306a\u3053\u3068\u306b\u6311\u6226\u3059\u308b\u610f\u6b32\u306e\u3042\u308b\u65b9\u3092\u52df\u96c6\u3057\u3066\u3044\u307e\u3059\u3002<\/a><br \/>\n<br \/>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u958b\u767a\u90e8\u306e\u67f3\u4e95\u3067\u3059\u3002with\u30b3\u30ed\u30ca\u3067\u5927\u5909\u306a\u72b6\u6cc1\u304c\u7d9a\u3044\u3066\u3044\u307e\u3059\u304c\u3001\u5f0a\u793e\u3067\u306f\u30ea\u30e2\u30fc\u30c8\u30ef &hellip; <a href=\"https:\/\/www.key-p.com\/blog\/staff\/archives\/107449\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":45,"featured_media":107464,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[],"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts\/107449"}],"collection":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/comments?post=107449"}],"version-history":[{"count":18,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts\/107449\/revisions"}],"predecessor-version":[{"id":107513,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts\/107449\/revisions\/107513"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/media\/107464"}],"wp:attachment":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/media?parent=107449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/categories?post=107449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/tags?post=107449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}