{"id":4895,"date":"2021-01-18T18:00:38","date_gmt":"2021-01-18T09:00:38","guid":{"rendered":"https:\/\/www.sria.co.jp\/blog\/?p=4895"},"modified":"2021-05-11T10:33:48","modified_gmt":"2021-05-11T01:33:48","slug":"4895","status":"publish","type":"post","link":"https:\/\/www.sria.co.jp\/blog\/2021\/01\/4895\/","title":{"rendered":"JS\u596e\u95d8\u8a18\u3010JavaScript\u3068canvas\u3068\u7dda\u5f62\u5909\u63db \u305d\u306e2 ~\u4efb\u610f\u306e\u70b9\u3092\u4e2d\u5fc3\u306b\u3057\u305f\u56de\u8ee2\u7de8~\u3011"},"content":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3002\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u8fbb\u3067\u3059\u3002<br \/>\n<a href=\"https:\/\/www.sria.co.jp\/blog\/2021\/01\/4784\/\">\u524d\u56de(JS\u596e\u95d8\u8a18\u3010JavaScript\u3068canvas\u3068\u7dda\u5f62\u5909\u63db ~\u56de\u8ee2\u7de8~\u3011)<\/a>\u306f\u3001\u7dda\u5f62\u5909\u63db\u3092\u4f7f\u3063\u3066canvas\u4e0a\u306e\u30dc\u30c3\u30af\u30b9\u3092\u56de\u8ee2\u3055\u305b\u3066\u307f\u307e\u3057\u305f\u3002<br \/>\n\u3055\u3066\u3001\u30dc\u30c3\u30af\u30b9\u3092\u56de\u8ee2\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u306e\u306f\u826f\u3044\u306e\u3067\u3059\u304c\u3001\u56de\u8ee2\u306e\u4e2d\u5fc3\u306f\u539f\u70b9\u306e\u307e\u307e\u3067\u3059\u3002<br \/>\n\u4eca\u56de\u306f\u56de\u8ee2\u306e\u4e2d\u5fc3\u3092\u539f\u70b9\u3067\u306f\u306a\u304f\u3001\u4efb\u610f\u306e\u70b9\u306b\u3057\u305f\u4e0a\u3067\u30dc\u30c3\u30af\u30b9\u3092\u56de\u8ee2\u3055\u305b\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h2>\u4efb\u610f\u306e\u70b9\u3092\u4e2d\u5fc3\u3068\u3057\u3066\u56de\u8ee2\u3055\u305b\u308b\u7dda\u5f62\u5909\u63db<\/h2>\n<p>\u307e\u305a\u306f\u3053\u3061\u3089\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<br \/>\n\u3053\u306e\u6570\u5f0f\u304c<strong>\u4efb\u610f\u306e\u70b9\u3092\u4e2d\u5fc3\u3068\u3057\u3066\u56de\u8ee2(\u53cd\u6642\u8a08\u56de\u308a)\u3055\u305b\u308b\u7dda\u5f62\u5909\u63db<\/strong>\u306e\u8a08\u7b97\u5f0f\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u524d\u56de\u6271\u3063\u305f\u5f0f\u3068\u4f3c\u3066\u3044\u307e\u3059\u306d\u3002<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter wp-image-4906 size-full\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image01-1.png\" alt=\"\u4efb\u610f\u306e\u70b9\u3092\u4e2d\u5fc3\u3068\u3057\u3066\u56de\u8ee2(\u53cd\u6642\u8a08\u56de\u308a)\u3055\u305b\u308b\u7dda\u5f62\u5909\u63db\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image01-1.png 1000w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image01-1-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image01-1-768x307.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<p>\u306a\u305c\u3053\u306e\u6570\u5f0f\u3067\u4efb\u610f\u306e\u70b9\u3092\u4e2d\u5fc3\u3068\u3057\u305f\u56de\u8ee2\u304c\u53ef\u80fd\u306a\u306e\u304b\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<br \/>\n\u306a\u3093\u304b\u96e3\u3057\u305d\u3046\u3067\u3059\u304c\u3001\u51e6\u7406\u30921\u3064\u305a\u3064\u8ffd\u3063\u3066\u3044\u3051\u3070\u5927\u4e08\u592b\u3067\u3059!<\/p>\n<p>\u307e\u305a\u3001\u4ee5\u4e0b\u306e2\u6b21\u5143\u5e73\u9762\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<br \/>\n\u70b9P\u304c\u56de\u8ee2\u306e\u4e2d\u5fc3\u70b9\u3067\u3042\u308a\u3001\u5ea7\u6a19\u306f(a, b)\u3068\u3057\u307e\u3059\u3002<br \/>\n\u70b9A\u304c\u56de\u8ee2\u5bfe\u8c61\u306e\u8d64\u30dc\u30c3\u30af\u30b9\u306e\u4e2d\u5fc3\u70b9\u3067\u3059\u3002\u5ea7\u6a19\u306f(x, y)\u3068\u3057\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter wp-image-4907 size-full\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-1.png\" alt=\"\u7dda\u5f62\u5909\u63db\u306e\u8aac\u660e \u521d\u671f\u72b6\u614b\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-1.png 1000w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-1-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-1-768x307.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<p>&nbsp;<\/p>\n<p>\u4e0a\u56f3\u306e\u72b6\u614b\u304b\u3089\u70b9P\u3001A\u305d\u308c\u305e\u308c\u306ex\u3092-a\u3002y\u3092-b\u3057\u307e\u3059\u3002<br \/>\n\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u56f3\u306e\u3088\u3046\u306b\u70b9P\u304c\u539f\u70b9\u306b\u91cd\u306a\u308b\u3088\u3046\u306b\u5e73\u884c\u79fb\u52d5\u3057\u307e\u3059\u3002<br \/>\n\u3053\u306e\u6642\u306e\u70b9P\u3092P&#8217;\u3002\u70b9A\u3092A&#8217;\u3068\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n\u70b9P&#8217;\u306f(a &#8211; a, b &#8211; b)\u306a\u306e\u3067(0, 0)\u3068\u306a\u308a\u3001\u70b9A&#8217;\u306f(x &#8211; a, y &#8211; b )\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter wp-image-4908 size-full\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-1.png\" alt=\"\u7dda\u5f62\u5909\u63db\u306e\u8aac\u660e \u70b9P\u3092\u539f\u70b9\u306b\u79fb\u52d5\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-1.png 1000w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-1-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-1-768x307.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<p>&nbsp;<\/p>\n<p>\u6b21\u306b\u3001\u70b9P'(\u539f\u70b9)\u3092\u4e2d\u5fc3\u3068\u3057\u3066\u03b8\u00b0\u3067\u56de\u8ee2\u306e\u7dda\u5f62\u5909\u63db\u3092\u884c\u3044\u307e\u3059\u3002<br \/>\n\u3059\u308b\u3068\u3001\u70b9A&#8217;\u304c\u03b8\u00b0\u79fb\u52d5\u3057\u305f\u70b9B\u304c\u5f97\u3089\u308c\u307e\u3059\u3002\u70b9B\u306f(x&#8217;, y&#8217;)\u3068\u3057\u307e\u3059\u3002<br \/>\n2\u6b21\u5143\u5e73\u9762\u3067\u8868\u3059\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u3053\u3053\u307e\u3067\u3067<strong>\u4efb\u610f\u306e\u70b9\u3092\u4e2d\u5fc3\u3068\u3057\u3066\u56de\u8ee2\u3055\u305b\u308b\u7dda\u5f62\u5909\u63db<\/strong>\u306e\u8a08\u7b97\u5f0f\u306e\u524d\u534a\u307e\u3067\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>&nbsp;<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter wp-image-4909 size-full\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-1.png\" alt=\"\u7dda\u5f62\u5909\u63db\u306e\u8aac\u660e \u539f\u70b9\u3092\u4e2d\u5fc3\u70b9\u306b\u3057\u305f\u53cd\u6642\u8a08\u5468\u308a\u306e\u56de\u8ee2\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-1.png 1000w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-1-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-1-768x307.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<p>&nbsp;<\/p>\n<p>\u3042\u3068\u306f\u30ab\u30f3\u30bf\u30f3\u3067\u3059\u3002<br \/>\n\u70b9\u6570P&#8217;\u3001A&#8217;\u3001B\u305d\u308c\u305e\u308c\u306ex\u306b+a\u3001y\u306b+b\u3092\u3057\u3066\u5e73\u884c\u79fb\u52d5\u3055\u305b\u307e\u3059\u3002<br \/>\n\u3053\u306e\u5e73\u884c\u79fb\u52d5\u306b\u3088\u3063\u3066\u3001\u70b9P&#8217;\u3001A&#8217;\u306f\u3001\u5143\u306e\u70b9P\u3001A\u306e\u4f4d\u7f6e\u306b\u623b\u308a\u307e\u3059\u3002<br \/>\n\u70b9B\u306f\u70b9B&#8217;\u306b\u79fb\u52d5\u3057\u307e\u3059\u3002\u3053\u306e\u70b9B&#8217;\u304c<strong>\u70b9P\u3092\u4e2d\u5fc3\u306b\u3057\u3066\u03b8\u00b0\u56de\u8ee2\u3057\u305f\u6642\u306e\u5ea7\u6a19(x&#8221;, y&#8221;)<\/strong>\u306b\u306a\u308b\u308f\u3051\u3067\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter wp-image-4910 size-full\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-1.png\" alt=\"\u7dda\u5f62\u5909\u63db\u306e\u8aac\u660e \u56de\u8ee2\u306e\u4e2d\u5fc3\u70b9\u3092\u623b\u3059\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-1.png 1000w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-1-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-1-768x307.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<h2>canvas\u4e0a\u3067\u56de\u8ee2\u51e6\u7406\u3092\u5b9f\u88c5\u3057\u3066\u307f\u308b<\/h2>\n<h3>\u4eca\u56de\u306e\u6210\u679c\u7269<\/h3>\n<p>\u307e\u305a\u306f\u4eca\u56de\u306e\u6210\u679c\u7269\u306e\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3092\u3069\u3046\u305e\u3002<br \/>\n\u524d\u534a\u3067\u89e3\u8aac\u3057\u305f\u7dda\u5f62\u5909\u63db\u306e\u8a08\u7b97\u5f0f\u3092canvas\u4e0a\u3067\u5b9f\u884c\u3057\u3066\u307f\u305f\u7d50\u679c\u3067\u3059\u3002<br \/>\n&nbsp;<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter wp-image-4911 size-full\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image06.png\" alt=\"\u4efb\u610f\u306e\u70b9\u3092\u4e2d\u5fc3\u306b\u3057\u305f\u56de\u8ee2\u306e\u7dda\u5f62\u5909\u63db\u306e\u6210\u679c\u7269\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image06.png 1000w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image06-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image06-768x307.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<p>&nbsp;<\/p>\n<p>\u8d64\u30dc\u30c3\u30af\u30b9\u304c\u521d\u671f\u914d\u7f6e\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002(200, 200)\u306e\u4f4d\u7f6e\u306b\u914d\u7f6e\u3057\u307e\u3057\u305f\u3002<br \/>\n\u56de\u8ee2\u306e\u4e2d\u5fc3\u70b9\u306f(80, 120)\u306e\u4f4d\u7f6e\u306b\u914d\u7f6e\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u3053\u306e\u4e2d\u5fc3\u70b9\u3092\u5143\u306b\u8d64\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53cd\u6642\u8a08\u56de\u308a\u306b\u56de\u8ee2\u3055\u305b\u3001\u56de\u8ee2\u5f8c\u306e\u4f4d\u7f6e\u306b\u30dc\u30c3\u30af\u30b9\u3092\u63cf\u753b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u9752\u30dc\u30c3\u30af\u30b9\u306f\u4e2d\u5fc3\u70b9\u3092\u5143\u306b\u3001\u8d64\u30dc\u30c3\u30af\u30b9\u309260\u00b0\u56de\u8ee2\u3055\u305b\u305f\u30dc\u30c3\u30af\u30b9\u3067\u3059\u3002<br \/>\n\u7dd1\u30dc\u30c3\u30af\u30b9\u306f120\u00b0\u3002\u9ec4\u8272\u30dc\u30c3\u30af\u30b9\u306f180\u00b0\u56de\u8ee2\u3055\u305b\u3066\u3044\u307e\u3059\u3002<br \/>\n\u56f3\u89e3\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter wp-image-4912 size-full\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image07.png\" alt=\"\u4efb\u610f\u306e\u70b9\u3092\u4e2d\u5fc3\u306b\u3057\u305f\u56de\u8ee2\u306e\u7dda\u5f62\u5909\u63db\u306e\u6210\u679c\u7269\u306e\u89e3\u8aac\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image07.png 1000w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image07-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image07-768x307.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<h3>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u89e3\u8aac<\/h3>\n<p>\u305d\u308c\u3067\u306f\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u89e3\u8aac\u306b\u5165\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u69cb\u6210\u306f\u524d\u56de\u3068\u540c\u69d8\u3067\u3059\u3002<br \/>\nindex.html\u3068main.js\u304c\u3042\u308b\u3060\u3051\u306e\u30b7\u30f3\u30d7\u30eb\u306a\u69cb\u6210\u3067\u3059\u3002<br \/>\nindex.html\u306f\u524d\u56de\u304b\u3089\u5909\u308f\u3063\u3066\u3044\u307e\u305b\u3093\u3002\u5909\u66f4\u3057\u305f\u306e\u306fmain.js\u306e\u307f\u3067\u3059\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/sriaTsuji\/public\/tree\/main\/canvas02\" target=\"_blank\" rel=\"noopener\">\u30bd\u30fc\u30b9\u4e00\u89a7<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/sriaTsuji\/public\/blob\/main\/canvas02\/index.html\" target=\"_blank\" rel=\"noopener\">index.html<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/sriaTsuji\/public\/blob\/main\/canvas02\/main.js\" target=\"_blank\" rel=\"noopener\">main.js<\/a><\/li>\n<\/ul>\n<p>main.js\u306e\u5168\u6587\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<pre>\/\/ \u753b\u9762\u306e\u9ad8\u3055\u3068\u5e45\nlet width = 0\nlet height = 0\n\/\/ canvas \u8981\u7d20\nlet canvas = null\nlet context = null\n\n\/\/ \u521d\u671f\u5316\u51e6\u7406\nconst init = function () {\n  \/\/ \u753b\u9762\u306e\u6a2a\u5e45\u30fb\u9ad8\u3055\u3092\u53d6\u5f97\n  width = window.innerWidth\n  height = window.innerHeight\n\n  \/\/ canvas \u3092\u751f\u6210\n  canvas = document.getElementById('canvas')\n  context = canvas.getContext('2d')\n  canvas.width = width\n  canvas.height = height\n\n  \/\/ \u539f\u70b9\u3092\u79fb\u52d5\n  context.translate(width \/ 2, height \/ 2)\n  \/\/ y\u8ef8\u306e\u30d7\u30e9\u30b9\u30fb\u30de\u30a4\u30ca\u30b9\u3092\u53cd\u8ee2\u3059\u308b\n  context.scale(1, -1)\n\n  \/\/ \u80cc\u666f\u3092\u63cf\u753b\n  context.fillStyle = '#0099cc';\n  context.fillRect(-(width \/ 2), -(height \/ 2), canvas.width,canvas.height);\n}\n\n\/\/ \u5186\u3092\u63cf\u304f\u51e6\u7406\nconst drawCircle = function (x, y, radius = 10, color = \"#000000\") {\n  context.beginPath();\n  context.arc(x, y, radius, 0, Math.PI * 2, false);\n  context.fillStyle = color;\n  context.fill();\n  context.stroke();\n}\n\n\/\/ \u7dda\u5206\u3092\u63cf\u304f\u51e6\u7406\nconst drawLine = function (startX, startY, endX, endY) {\n  context.beginPath();\n  context.moveTo(startX, startY)\n  context.lineTo(endX, endY);\n  context.stroke();\n}\n\n\/\/ \u56db\u89d2\u5f62\u3092\u63cf\u304f\u51e6\u7406\nconst drawRect = function (x, y, width = 20, height = 20, color = \"#000000\") {\n  context.beginPath();\n  context.rect(x, y, width, height)\n  context.fillStyle = color;\n  context.fill();\n  context.stroke();\n}\n\n\/\/ \u5ea6\u3092\u30e9\u30b8\u30a2\u30f3\u306b\u5909\u63db\u3059\u308b\u51e6\u7406\nconst convertToRadian = function (degree) {\n  return degree *  ( Math.PI \/ 180 ) \n}\n\n\/\/ basicPoint \u3092\u4e2d\u5fc3\u70b9\u3068\u3057\u3066\u3001target \u3092\u7dda\u5f62\u5909\u63db(\u53cd\u6642\u8a08\u5468\u308a\u306b\u56de\u8ee2)\u3057\u3001\u5909\u63db\u5f8c\u306e\u4f4d\u7f6e\u3092\u8fd4\u5374\u3059\u308b\nconst linearTransformation = function (target, degree, basicPoint = {x: 0, y: 0}) {\n  \/\/ \u30e9\u30b8\u30a2\u30f3\u3092\u53d6\u5f97\n  const radian = convertToRadian(degree)\n\n  \/\/ \u307e\u305a\u4e2d\u5fc3\u70b9\u3092\u539f\u70b9\u306b\u79fb\u52d5\u3057\u305f\u4e0a\u3067\u3001\u7dda\u5f62\u5909\u63db\u3092\u884c\u3046\n  \/\/ x' = (x - a) * cos\u03b8 + (y - b) * -sin\u03b8\n  \/\/ y' = (x - a) * cos\u03b8 + (y - b) * sin\u03b8\n  const firstTransformation = {\n    x : (target.x - basicPoint.x) * Math.cos(radian) + (target.y - basicPoint.y) * -Math.sin(radian),\n    y : (target.x - basicPoint.x) * Math.sin(radian) + (target.y - basicPoint.y) * Math.cos(radian),\n  }\n\n  \/\/ firstTransformation\u306b\u3001\u4e2d\u5fc3\u70b9\u306ex,y\u3092\u52a0\u7b97\u3057\u305f\u70b9\u3092\u8fd4\u3059\n  return {\n    x : firstTransformation.x + basicPoint.x,\n    y : firstTransformation.y + basicPoint.y\n  }\n}\n\nwindow.onload = function(){\n  \/\/ \u521d\u671f\u5316\u51e6\u7406\n  init()\n  \/\/ \u539f\u70b9\u3092\u63cf\u753b\n  drawCircle(0, 0, 4, '#000000')\n  \/\/ y\u8ef8\u3092\u63cf\u753b\n  drawLine(0, - (height \/ 2), 0, height \/ 2)\n  \/\/ x\u8ef8\u3092\u63cf\u753b\n  drawLine(- (width \/ 2), 0, width \/ 2, 0)\n\n  \/\/ \u56de\u8ee2\u306e\u4e2d\u5fc3\u70b9\n  const basicPoint = {\n    x: 80,\n    y: 120,\n  }\n  \/\/ \u7dda\u5f62\u5909\u63db\u524d\u306e\u70b9\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\n  const rect01 = {\n    x: 200,\n    y: 200,\n  }\n  \/\/ \u30dc\u30c3\u30af\u30b9\u306e\u5927\u304d\u3055\n  const boxSize = 20\n\n  \/\/ \u56de\u8ee2\u306e\u4e2d\u5fc3\u70b9\u3092\u63cf\u753b\n  drawCircle(basicPoint.x, basicPoint.y, 4, '#000000')\n\n  \/\/ \u7dda\u5f62\u5909\u63db\u524d\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u63cf\u753b\n  drawRect(\n    rect01.x - (boxSize \/ 2),\n    rect01.y - (boxSize \/ 2),\n    boxSize,\n    boxSize,\n    'red'\n  )\n\n  \/\/ \u4e2d\u5fc3\u70b9\u3092\u5143\u306b60\u00b0\u56de\u8ee2\u3055\u305b\u308b\n  const rect02 = linearTransformation(rect01, 60, basicPoint)\n  \/\/ 60\u00b0\u56de\u8ee2\u3055\u305b\u305f\u30dc\u30c3\u30af\u30b9\u3092\u63cf\u753b\n  drawRect(\n    rect02.x - (boxSize \/ 2),\n    rect02.y - (boxSize \/ 2),\n    boxSize,\n    boxSize,\n    'blue'\n  )\n\n  \/\/ \u4e2d\u5fc3\u70b9\u3092\u5143\u306b120\u00b0\u56de\u8ee2\u3055\u305b\u308b\n  const rect03 = linearTransformation(rect01, 120, basicPoint)\n  \/\/ 120\u00b0\u56de\u8ee2\u3055\u305b\u305f\u30dc\u30c3\u30af\u30b9\u3092\u63cf\u753b\n  drawRect(\n    rect03.x - (boxSize \/ 2),\n    rect03.y - (boxSize \/ 2),\n    boxSize,\n    boxSize,\n    'green'\n  )\n\n  \/\/ \u4e2d\u5fc3\u70b9\u3092\u5143\u306b180\u00b0\u56de\u8ee2\u3055\u305b\u308b\n  const rect04 = linearTransformation(rect01, 180, basicPoint)\n  \/\/ 180\u00b0\u56de\u8ee2\u3055\u305b\u305f\u30dc\u30c3\u30af\u30b9\u3092\u63cf\u753b\n  drawRect(\n    rect04.x - (boxSize \/ 2),\n    rect04.y - (boxSize \/ 2),\n    boxSize,\n    boxSize,\n    'orange'\n  )\n\n}\n<\/pre>\n<p>\u51e6\u7406\u306e\u6d41\u308c\u306f\u524d\u56de\u3068\u540c\u3058\u3067\u2026<br \/>\ncanvas\u306e\u539f\u70b9\u3092\u753b\u9762\u4e2d\u592e\u306b\u914d\u7f6e\u3057\u3066\u3001y\u8ef8\u306e\u30d7\u30e9\u30b9\u30fb\u30de\u30a4\u30ca\u30b9\u3092\u53cd\u8ee2\u3002<br \/>\n\u305d\u3057\u3066\u3001\u539f\u70b9\u3001x\u8ef8\u3001y\u8ef8\u306e\u63cf\u753b\u3092\u884c\u3063\u305f\u5f8c\u3001\u30dc\u30c3\u30af\u30b9\u306e\u56de\u8ee2\u51e6\u7406\u3068\u63cf\u753b\u2026\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u5927\u304d\u304f\u5909\u66f4\u306b\u306a\u3063\u305f\u306e\u306f<strong>linearTransformation<\/strong>\u95a2\u6570\u306e\u4e2d\u8eab\u3067\u3059\u3002<br \/>\n\u524d\u56de\u306f\u539f\u70b9\u3092\u4e2d\u5fc3\u306b\u3057\u305f\u56de\u8ee2\u3060\u3051\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3057\u305f\u304c\u3001\u4eca\u56de\u306f\u4efb\u610f\u306e\u70b9\u3092\u53d7\u3051\u53d6\u308a\u3001\u305d\u306e\u70b9\u3092\u4e2d\u5fc3\u306b\u3057\u305f\u56de\u8ee2\u3092\u884c\u3048\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<h3>\u7dda\u5f62\u5909\u63db\u51e6\u7406(linearTransformation)\u306e\u89e3\u8aac<\/h3>\n<pre>\/\/ basicPoint \u3092\u4e2d\u5fc3\u70b9\u3068\u3057\u3066\u3001target \u3092\u7dda\u5f62\u5909\u63db(\u56de\u8ee2)\u3057\u3001\u5909\u63db\u5f8c\u306e\u4f4d\u7f6e\u3092\u8fd4\u5374\u3059\u308b\nconst linearTransformation = function (target, degree, basicPoint = {x: 0, y: 0}) {\n  \/\/ \u30e9\u30b8\u30a2\u30f3\u3092\u53d6\u5f97\n  const radian = convertToRadian(degree)\n\n  \/\/ \u307e\u305a\u4e2d\u5fc3\u70b9\u3092\u539f\u70b9\u306b\u79fb\u52d5\u3057\u305f\u4e0a\u3067\u3001\u7dda\u5f62\u5909\u63db\u3092\u884c\u3046\n  \/\/ x' = (x - a) * cos\u03b8 - (y - b) * sin\u03b8\n  \/\/ y' = (x - a) * cos\u03b8 + (y - b) * sin\u03b8\n  const firstTransformation = {\n    x : (target.x - basicPoint.x) * Math.cos(radian) + (target.y - basicPoint.y) * -Math.sin(radian),\n    y : (target.x - basicPoint.x) * Math.sin(radian) + (target.y - basicPoint.y) * Math.cos(radian),\n  }\n\n  \/\/ firstTransformation\u306b\u3001\u4e2d\u5fc3\u70b9\u306ex,y\u3092\u52a0\u7b97\u3057\u305f\u70b9\u3092\u8fd4\u3059\n  return {\n    x : firstTransformation.x + basicPoint.x,\n    y : firstTransformation.y + basicPoint.y\n  }\n}\n<\/pre>\n<p>\u3067\u306f\u3001\u809d\u5fc3\u306e<strong>linearTransformation<\/strong>\u95a2\u6570\u306e\u4e2d\u8eab\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n\u2026\u3068\u8a00\u3063\u3066\u3082\u96e3\u3057\u3044\u4e8b\u306f\u4f55\u3082\u3084\u3063\u3066\u3044\u307e\u305b\u3093\u3002<br \/>\nlinearTransformation\u95a2\u6570\u3067\u3084\u3063\u3066\u3044\u308b\u4e8b\u306f\u3001\u672c\u8a18\u4e8b\u306e\u524d\u534a\u3067\u89e3\u8aac\u3057\u305f\u8a08\u7b97\u5f0f\u3092\u3001\u305d\u3063\u304f\u308a\u305d\u306e\u307e\u307eJavaScript\u306b\u7f6e\u304d\u63db\u3048\u3066\u3044\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n<p>\u306f\u3058\u3081\u306b\u5f15\u6570\u306b\u3064\u3044\u3066\u3067\u3059\u304c\u3001target\u304c\u56de\u8ee2\u5bfe\u8c61\u306e\u5ea7\u6a19\u3002degree\u306f\u56de\u8ee2\u3055\u305b\u308b\u89d2\u5ea6\u3002basicPoint\u304c\u56de\u8ee2\u306e\u4e2d\u5fc3\u70b9\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>basicPoint\u306b\u306f\u521d\u671f\u5024\u3068\u3057\u3066\u3001<strong>{x: 0, y: 0}<\/strong>\u3092\u5165\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u3053\u306e\u521d\u671f\u5024\u304c\u3042\u308b\u3053\u3068\u3067\u3001basicPoint\u306b\u4f55\u3082\u5165\u3089\u306a\u3051\u308c\u3070\u3001\u56de\u8ee2\u306e\u4e2d\u5fc3\u70b9\u306f\u539f\u70b9\u3068\u306a\u308a\u3001basicPoint\u306b\u5ea7\u6a19\u304c\u5165\u308c\u3070\u3001\u305d\u306e\u5ea7\u6a19\u304c\u56de\u8ee2\u306e\u4e2d\u5fc3\u70b9\u3068\u306a\u308b\u308f\u3051\u3067\u3059\u3002<\/p>\n<p>\u51e6\u7406\u306e\u521d\u3081\u306f\u3001\u5f15\u6570\u306edegree\u304b\u3089\u30e9\u30b8\u30a2\u30f3\u3092\u7b97\u51fa\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u3053\u306e\u51e6\u7406\u306f\u524d\u56de\u3068\u540c\u3058\u3067\u3059\u306d\u3002<\/p>\n<p>\u6b21\u306b\u3001\u4e2d\u5fc3\u70b9\u3092\u539f\u70b9\u306b\u79fb\u52d5\u3055\u305b\u305f\u4e0a\u3067\u7dda\u5f62\u5909\u63db\u306e\u8a08\u7b97\u3092\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u8a08\u7b97\u7d50\u679c\u306ffirstTransformation\u306b\u683c\u7d0d\u3055\u308c\u307e\u3059\u3002<br \/>\n<strong>\u3053\u306efirstTransformation\u304c\u3001\u4efb\u610f\u306e\u70b9\u3092\u4e2d\u5fc3\u3068\u3057\u3066\u56de\u8ee2\u3055\u305b\u308b\u7dda\u5f62\u5909\u63db\u306e\u8a08\u7b97\u5f0f\u306e\u524d\u534a\u306b\u8a72\u5f53\u3057\u307e\u3059\u3002<\/strong><\/p>\n<p>\u6700\u5f8c\u306bfirstTransformation\u306ex\u3068y\u306b\u3001\u56de\u8ee2\u306e\u4e2d\u5fc3\u70b9basicPoint\u306ex\u3068y\u3092\u305d\u308c\u305e\u308c\u52a0\u7b97\u3057\u307e\u3059\u3002<br \/>\n<strong>\u3053\u306e\u52a0\u7b97\u304c\u3001\u4efb\u610f\u306e\u70b9\u3092\u4e2d\u5fc3\u3068\u3057\u3066\u56de\u8ee2\u3055\u305b\u308b\u7dda\u5f62\u5909\u63db\u306e\u8a08\u7b97\u5f0f\u306e\u5f8c\u534a\u306b\u8a72\u5f53\u3057\u307e\u3059\u3002<\/strong><br \/>\n\u3053\u308c\u3067\u4efb\u610f\u306e\u70b9\u3067\u3042\u308bbasicPoint\u3092\u4e2d\u5fc3\u306b\u56de\u8ee2\u3057\u305f\u5f8c\u306e(x, y)\u304c\u5f97\u3089\u308c\u307e\u3059\u3002<\/p>\n<p>\u3042\u3068\u306f\u623b\u308a\u5024\u3092\u4f7f\u3063\u3066\u3001\u30dc\u30c3\u30af\u30b9\u3092\u63cf\u753b\u3059\u308b\u3060\u3051\u3067\u3059\u306d\u3002<\/p>\n<h2>\u307e\u3068\u3081<\/h2>\n<p>\u524d\u56de\u304b\u3089\u5f15\u304d\u7d9a\u304d\u3001\u7dda\u5f62\u5909\u63db\u3092\u4f7f\u3063\u3066canvas\u4e0a\u3067\u306e\u56de\u8ee2\u51e6\u7406\u3092\u5b9f\u88c5\u3057\u307e\u3057\u305f\u3002<br \/>\n\u3053\u3053\u307e\u3067\u304f\u308c\u3070\u3001\u3069\u3093\u306a\u56de\u8ee2\u3067\u3042\u3063\u3066\u3082\u8868\u73fe\u3067\u304d\u305d\u3046\u3067\u3059\u306d\u3002<\/p>\n<p>\u6b21\u56de\u3082\u3001\u3082\u3046\u3061\u3087\u3063\u3068\u3060\u3051\u7dda\u5f62\u5909\u63db\u3092\u3084\u3063\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n\u3082\u3046\u3061\u3063\u3068\u3060\u3051\u7d9a\u304f\u3093\u3058\u3083\u3002<\/p>\n<p>\u6b21\u56de\u306e\u8a18\u4e8b: <a href=\"https:\/\/www.sria.co.jp\/blog\/2021\/02\/4966\/\">JS\u596e\u95d8\u8a18\u3010JavaScript\u3068canvas\u3068\u7dda\u5f62\u5909\u63db \u305d\u306e3 ~\u69d8\u3005\u306a\u7dda\u5f62\u5909\u63db\u7de8~\u3011<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3002\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u8fbb\u3067\u3059\u3002 \u524d\u56de(JS\u596e\u95d8\u8a18\u3010JavaScript\u3068canvas\u3068\u7dda\u5f62\u5909\u63db ~\u56de\u8ee2\u7de8~\u3011)\u306f\u3001\u7dda\u5f62\u5909\u63db\u3092\u4f7f\u3063\u3066canvas\u4e0a\u306e\u30dc\u30c3\u30af\u30b9\u3092\u56de\u8ee2\u3055\u305b\u3066\u307f\u307e\u3057\u305f\u3002 \u3055\u3066\u3001\u30dc\u30c3\u30af\u30b9\u3092\u56de\u8ee2\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u306e&#8230;<\/p>\n","protected":false},"author":5,"featured_media":4892,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[49],"_links":{"self":[{"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4895"}],"collection":[{"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/comments?post=4895"}],"version-history":[{"count":54,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4895\/revisions"}],"predecessor-version":[{"id":5300,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4895\/revisions\/5300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/media\/4892"}],"wp:attachment":[{"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/media?parent=4895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/categories?post=4895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/tags?post=4895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}