\n\u6570\u5f0f\u3067\u8868\u3059\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
![\"\u7dda\u5f62\u5909\u63db\u306e\u57fa\u672c\u5f0f\"](\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image01.png\")
<\/div>\n\u4e0a\u8a18\u306e\u5f0f\u3092\u8a08\u7b97\u3057\u3066\u307f\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002
\n\u7d50\u679c\u3068\u3057\u3066\u30d9\u30af\u30c8\u30eb\u3092\u5f97\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
![\"\u7dda\u5f62\u5909\u63db\uff08\u8a08\u7b97\u5f8c\uff09\"](\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05.png\")
<\/div>\n\u9ad8\u6821\u6570\u5b66\u306e\u884c\u5217\u306e\u5206\u91ce\u3067\u51fa\u3066\u304d\u305f\u30e4\u30c4\u3067\u3059\u306d\uff01 \u306a\u3093\u3068\u3082\u61d0\u304b\u3057\u3044\u3067\u3059\uff01
\n\u4eca\u56de\u306f\u7dda\u5f62\u5909\u63db\u306e\u4e2d\u3067\u3082\u3001\u30b5\u30a4\u30f3\u3001\u30b3\u30b5\u30a4\u30f3\u3092\u4f7f\u3063\u3066\u53cd\u6642\u8a08\u56de\u308a\u306b\u79fb\u52d5\u3055\u305b\u308b\u3082\u306e\u3092\u4f7f\u3063\u3066\u3001canvas\u4e0a\u3067\u30dc\u30c3\u30af\u30b9\u3092\u52d5\u304b\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002
\n\u53cd\u6642\u8a08\u56de\u308a\u306b\u79fb\u52d5\u3055\u305b\u308b\u7dda\u5f62\u5909\u63db\u306e\u5f0f\u306f\u30b3\u30c1\u30e9\u3067\u3059\u3002<\/p>\n
![\"\u7dda\u5f62\u5909\u63db\uff08\u56de\u8ee2\uff09\"](\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02.png\")
<\/div>\n\u4e0a\u8a18\u306e\u5f0f\u3092JavaScript\u3067\u8868\u3059\u3068\u4e0b\u8a18\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
const linearTransformation = function (target = {x: 0, y: 0}, radian) {\n \/\/ \u5909\u63db\u5bfe\u8c61\u306e{x, y}\u306b\u5bfe\u3057\u3066\u7dda\u5f62\u5909\u63db\u3057\u3001\u305d\u306e\u7d50\u679c\u3092\u8fd4\u5374\u3057\u307e\u3059\u3002\n return {\n x : target.x * Math.cos(radian) + target.y * -(Math.sin(radian)),\n y : target.x * Math.sin(radian) + target.y * Math.cos(radian),\n }\n}\n<\/pre>\n\u7dda\u5f62\u5909\u63db\u306b\u3064\u3044\u3066\u3082\u3063\u3068\u77e5\u308a\u305f\u3044\u3068\u3044\u3046\u65b9\u306fwikipedia\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002\uff08\u4e38\u6295\u3052\uff09
\n\u7dda\u578b\u5199\u50cf \u7dda\u5f62\u5909\u63db\u884c\u5217\u306e\u4f8b – wikipedia<\/a><\/p>\ncanvas\u4e0a\u3067\u7dda\u5f62\u5909\u63db\u3092\u4f7f\u3063\u3066\u30dc\u30c3\u30af\u30b9\u3092\u56de\u8ee2\u3055\u305b\u3066\u307f\u308b<\/h2>\n\u4eca\u56de\u306e\u6210\u679c\u7269<\/h3>\n
\u307e\u305a\u5148\u306b\u4eca\u56de\u306e\u6210\u679c\u7269\u306e\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3092\u3069\u3046\u305e\u3002<\/p>\n
<\/p>\n
![\"canvas\u4e0a\u3067\u7dda\u5f62\u5909\u63db\u3057\u305f\u753b\u9762\"](\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03.png\")
<\/div>\n <\/p>\n
\u4e0a\u56f3\u3067\u306f\u753b\u9762\u4e2d\u592e\u3092\u539f\u70b9\u3068\u3057\u3066\u753b\u9762\u3044\u3063\u3071\u3044\u306bcanvas\u3092\u914d\u7f6e\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u8d64\u30dc\u30c3\u30af\u30b9\u304c\u521d\u671f\u914d\u7f6e\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002
\n\u539f\u70b9\u304b\u3089x\u8ef8\u306b75\u3001y\u8ef8\u306b75\u306e\u4f4d\u7f6e\u306b\u914d\u7f6e\u3057\u307e\u3057\u305f\u3002
\n\u8d64\u30dc\u30c3\u30af\u30b9\u306fx\u3068y\u306e\u5024\u304c\u540c\u3058\u306a\u306e\u3067\u3001\u539f\u70b9\u3068\u306e\u306a\u3059\u89d2\u5ea6\u306f45\u00b0\u3067\u3059\u306d\u3002<\/p>\n
\u3053\u306e\u8d64\u30dc\u30c3\u30af\u30b9\u3092\u7dda\u5f62\u5909\u63db\u3092\u4f7f\u3063\u3066\u3001\u53cd\u6642\u8a08\u5468\u308a\u306b45\u00b0\u79fb\u52d5\u3055\u305b\u305f\u306e\u304c\u9752\u30dc\u30c3\u30af\u30b9\u3002
\n\u307e\u305f\u3001\u8d64\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u6642\u8a08\u5468\u308a\u306b135\u00b0\u79fb\u52d5\u3055\u305b\u305f\u306e\u304c\u7dd1\u30dc\u30c3\u30af\u30b9\u3067\u3059\u3002
\n\u8d64\u30dc\u30c3\u30af\u30b9\u306f\u539f\u70b9\u304b\u308945\u00b0\u306e\u4f4d\u7f6e\u306b\u3044\u308b\u306e\u3067\u3001\u9752\u30dc\u30c3\u30af\u30b9\u306e\u89d2\u5ea6\u306f90\u00b0\u3002\u7dd1\u30dc\u30c3\u30af\u30b9\u306f180\u00b0\u306e\u4f4d\u7f6e\u306b\u3044\u307e\u3059\u3002
\n\u56f3\u89e3\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
<\/p>\n
![\"canvas\u4e0a\u3067\u7dda\u5f62\u5909\u63db\u3057\u305f\u753b\u9762\u3068\u305d\u306e\u89e3\u8aac\"](\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04.png\")
<\/div>\n <\/p>\n
\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u89e3\u8aac<\/h3>\n
\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002\u69cb\u6210\u81ea\u4f53\u306f\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002
\nindex.html\u306bcanvas\u306e\u51e6\u7406\u3092\u66f8\u3044\u305fmain.js\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u3002\u305d\u308c\u3060\u3051\u3067\u3059\u3002<\/p>\n
\n- \u30bd\u30fc\u30b9\u4e00\u89a7<\/a><\/li>\n
- index.html\u00a0<\/a><\/li>\n
- main.js<\/a><\/li>\n<\/ul>\n
\u809d\u3068\u306a\u308bmain.js\u306e\u5168\u6587\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n
\/\/ \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\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\/\/ \u753b\u9762\u306e\u4e2d\u5fc3\u3092\u539f\u70b9\u3068\u3057\u3066\u3001target \u3092\u7dda\u5f62\u5909\u63db\uff08\u56de\u8ee2\uff09\u3057\u3001\u5909\u63db\u5f8c\u306e\u4f4d\u7f6e\u3092\u8fd4\u5374\u3059\u308b\nconst linearTransformation = function (target, degree) {\n \/\/ \u30e9\u30b8\u30a2\u30f3\u3092\u53d6\u5f97\n const radian = convertToRadian(degree);\n\n \/\/ \u7dda\u5f62\u5909\u63db\u5f8c\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u5374\u3059\u308b\n return {\n x: target.x * Math.cos(radian) + target.y * -Math.sin(radian),\n y: target.x * Math.sin(radian) + target.y * Math.cos(radian),\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 \/\/ \u7dda\u5f62\u5909\u63db\u524d\u306e\u70b9\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\n const rect01 = {\n x: 75,\n y: 75,\n };\n \/\/ \u30dc\u30c3\u30af\u30b9\u306e\u5927\u304d\u3055\n const boxSize = 20;\n\n \/\/ \u7dda\u5f62\u5909\u63db\u524d\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u63cf\u753b\n drawRect(rect01.x - boxSize \/ 2, rect01.y - boxSize \/ 2, boxSize, boxSize, 'red');\n\n \/\/ \u89d2\u5ea645\u00b0\u3067\u7dda\u5f62\u5909\u63db\u3059\u308b\n const rect02 = linearTransformation(rect01, 45);\n \/\/ \u7dda\u5f62\u5909\u63db\u5f8c\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u63cf\u753b\n drawRect(rect02.x - boxSize \/ 2, rect02.y - boxSize \/ 2, boxSize, boxSize, 'blue');\n\n \/\/ \u89d2\u5ea6135\u00b0\u3067\u7dda\u5f62\u5909\u63db\u3059\u308b\n const rect03 = linearTransformation(rect01, 135);\n drawRect(rect03.x - boxSize \/ 2, rect03.y - boxSize \/ 2, boxSize, boxSize, 'green');\n};\n<\/pre>\nmain.js\u306e\u51e6\u7406\u306e\u6d41\u308c\u306f\u3001\u304a\u304a\u307e\u304b\u306b\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n
\n- \u30da\u30fc\u30b8\u304c\u8aad\u307f\u8fbc\u307e\u308c\u305f\u5f8c\u306binit\u3092\u5b9f\u884c\u3057\u3066\u3001canvas\u3092\u53d6\u5f97\u3059\u308b<\/li>\n
- canvas\u306e\u539f\u70b9\u3092\u753b\u9762\u4e2d\u592e\u306b\u3057\u3001y\u8ef8\u306e\u30d7\u30e9\u30b9\u30fb\u30de\u30a4\u30ca\u30b9\u3092\u53cd\u8ee2\u3059\u308b<\/li>\n
- x\u8ef8\u3068y\u8ef8\u3092\u63cf\u753b\u3059\u308b<\/li>\n
- \u7dda\u5f62\u5909\u63db\u524d\u306e\u70b9\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u7528\u610f\u3057\u3066\u3001\u8d64\u30dc\u30c3\u30af\u30b9\u3092\u63cf\u753b\u3059\u308b<\/li>\n
- \u8d64\u30dc\u30c3\u30af\u30b9\u3092\u89d2\u5ea645\u00b0\u3067\u7dda\u5f62\u5909\u63db\u3057\u305f\u9752\u30dc\u30c3\u30af\u30b9\u3092\u63cf\u753b\u3059\u308b<\/li>\n
- \u8d64\u30dc\u30c3\u30af\u30b9\u3092\u89d2\u5ea6135\u00b0\u3067\u7dda\u5f62\u5909\u63db\u3057\u305f\u7dd1\u30dc\u30c3\u30af\u30b9\u3092\u63cf\u753b\u3059\u308b<\/li>\n<\/ol>\n
\u3067\u306f\u3001main.js\u306e\u5185\u5bb9\u3092\u30d4\u30c3\u30af\u30a2\u30c3\u30d7\u3057\u3066\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u306d\u3002<\/p>\n
canvas\u306e\u539f\u70b9\u3092\u753b\u9762\u4e2d\u592e\u306b\u79fb\u52d5\u3059\u308b<\/h3>\n\/\/ \u539f\u70b9\u3092\u79fb\u52d5\ncontext.translate(width \/ 2, height \/ 2)\n\/\/ y\u8ef8\u306e\u30d7\u30e9\u30b9\u30fb\u30de\u30a4\u30ca\u30b9\u3092\u53cd\u8ee2\ncontext.scale(1, -1)\n<\/pre>\ncanvas\u3092\u521d\u671f\u5316\u3057\u305f\u5f8c\u306b\u3001translate()\u3068scale()\u3092\u4f7f\u3063\u3066\u3001canvas\u306e\u539f\u70b9\u3092\u753b\u9762\u4e2d\u592e\u3078\u79fb\u52d5\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
canvas\u306f\u7279\u306b\u4f55\u3082\u8a2d\u5b9a\u3057\u306a\u3051\u308c\u3070\u3001\u753b\u9762\u5de6\u4e0a\u304c\u539f\u70b9\u3068\u306a\u308a\u307e\u3059\u3002
\n\u305d\u3057\u3066\u3001x\u8ef8\u306f\u753b\u9762\u53f3\u65b9\u5411\u3078\u884c\u3051\u3070\u30d7\u30e9\u30b9\u3002y\u8ef8\u306f\u753b\u9762\u4e0b\u65b9\u5411\u3078\u884c\u3051\u3070\u30d7\u30e9\u30b9\u306b\u306a\u308a\u307e\u3059\u3002
\n\u3053\u306e\u72b6\u614b\u3092\u6570\u5b66\u3067\u3088\u304f\u898b\u308b2\u6b21\u5143\u5e73\u9762\u56f3\u306b\u5909\u63db\u3059\u308b\u305f\u3081\u306b\u3001translate()\u3068scale()\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u307e\u305atranslate()\u3092\u4f7f\u3063\u3066\u3001canvas\u3092\u753b\u9762\u6a2a\u5e45\u306e\u534a\u5206\u3060\u3051\u6c34\u5e73\u65b9\u5411\u53f3\u5411\u304d\u3078\u79fb\u52d5\u3057\u3001\u753b\u9762\u7e26\u5e45\u306e\u534a\u5206\u3060\u3051\u5782\u76f4\u65b9\u5411\u4e0b\u5411\u304d\u3078\u79fb\u52d5\u3055\u305b\u307e\u3059\u3002
\n\u3053\u308c\u3067\u753b\u9762\u4e2d\u592e\u3092\u539f\u70b9\u306b\u8a2d\u5b9a\u3059\u308b\u4e8b\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
\u6b21\u306b\u3001scale()\u3092\u4f7f\u3063\u3066y\u8ef8\u306e\u30d7\u30e9\u30b9\u30fb\u30de\u30a4\u30ca\u30b9\u3092\u9006\u8ee2\u3055\u305b\u307e\u3059\u3002
\nscale()\u306f\u8981\u7d20\u3092\u62e1\u5927\u30fb\u7e2e\u5c0f\u3059\u308b\u6642\u306b\u4f7f\u3044\u307e\u3059\u304c\u3001\u5f15\u6570\u306b\u30de\u30a4\u30ca\u30b9\u3092\u5165\u308c\u308b\u3053\u3068\u3067\u8981\u7d20\u3092\u53cd\u8ee2\u3057\u305f\u4e0a\u3067\u62e1\u5927\u30fb\u7e2e\u5c0f\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\n\u4eca\u56de\u306f\u7b2c2\u5f15\u6570\u306b-1\u3092\u5165\u308c\u3066\u3044\u308b\u306e\u3067\u3001x\u8ef8\u306b\u5bfe\u3057\u3066\u4e0a\u4e0b\u304c\u53cd\u8ee2\u3057\u30661\u500d\u306e\u5927\u304d\u3055\u3068\u306a\u308a\u307e\u3059\u3002
\n\u3064\u307e\u308a\u3001y\u8ef8\u306e\u30d7\u30e9\u30b9\u30fb\u30de\u30a4\u30ca\u30b9\u304c\u53cd\u8ee2\u3057\u305f\u72b6\u614b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u3061\u306a\u307f\u306b\u3001context.scale(-1, 1)\u3068\u3059\u308b\u3068\u3001x\u8ef8\u306e\u30d7\u30e9\u30b9\u30fb\u30de\u30a4\u30ca\u30b9\u304c\u53cd\u8ee2\u3057\u307e\u3059\u3002<\/p>\n
\u539f\u70b9\u3068\u8ef8\u3092\u63cf\u753b<\/h3>\n\/\/ \u539f\u70b9\u3092\u63cf\u753b\ndrawCircle(0, 0, 4, '#000000')\n\/\/ y\u8ef8\u3092\u63cf\u753b\ndrawLine(0, - (height \/ 2), 0, height \/ 2)\n\/\/ x\u8ef8\u3092\u63cf\u753b\ndrawLine(- (width \/ 2), 0, width \/ 2, 0)\n<\/pre>\n\u521d\u671f\u5316\u3057\u305f\u5f8c\u306f\u3001\u539f\u70b9\u3068\u8ef8\u3092\u63cf\u753b\u3057\u3066\u3044\u307e\u3059\u3002
\n\u753b\u9762\u4e2d\u592e\u306b\u79fb\u52d5\u3057\u305f\u306e\u3067\u3001\u539f\u70b9\u306fx = 0\u3001y = 0 \u3067\u63cf\u753b\u3067\u304d\u307e\u3059\u3002
\nx\u8ef8\u3068y\u8ef8\u306f\u305d\u308c\u305e\u308c\u753b\u9762\u306e\u7aef\u304b\u3089\u7aef\u307e\u3067\u7dda\u3092\u63cf\u753b\u3057\u3066\u3044\u308b\u3060\u3051\u3067\u3059\u306d\u3002<\/p>\n
\u5ea6(\u00b0)\u3092\u30e9\u30b8\u30a2\u30f3\u306b\u5909\u63db\u3059\u308b<\/h3>\n\/\/ \u5ea6\u3092\u30e9\u30b8\u30a2\u30f3\u306b\u5909\u63db\u3059\u308b\u51e6\u7406\nconst convertToRadian = function (degree) {\nreturn degree * ( Math.PI \/ 180 )\n}\n<\/pre>\n\u7dda\u5f62\u5909\u63db\u306e\u51e6\u7406\u3092\u898b\u3066\u3044\u304f\u524d\u306b\u3001\u5ea6(\u00b0)\u3092\u30e9\u30b8\u30a2\u30f3(rad)\u306b\u5909\u63db\u3059\u308b\u51e6\u7406\u3092\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
\u30e9\u30b8\u30a2\u30f3\u3068\u306f\u89d2\u5ea6\u3092\u8868\u3059\u5358\u4f4d\u3067\u3042\u308a\u3001\u5186\u306e\u534a\u5f84\u3068\u540c\u3058\u9577\u3055\u306e\u5f27\u3092\u5207\u308a\u53d6\u3063\u305f\u6642\u306e\u5186\u306e\u4e2d\u592e\u306e\u89d2\u304c1\u30e9\u30b8\u30a2\u30f3\u3067\u3059\u3002
\n\u534a\u5f84\u304c1\u306e\u5186\u3092\u8003\u3048\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u5186\u5468\u306f\u76f4\u5f84 * \u03c0\u306a\u306e\u3067\u30012\u03c0\u306b\u306a\u308a\u307e\u3059\u3002
\n\u3057\u305f\u304c\u3063\u3066\u3001\u5186\u4e00\u5468\u5206(360\u00b0)\u306e\u30e9\u30b8\u30a2\u30f3\u306f2\u03c0[rad]\u3068\u306a\u308a\u3001\u534a\u5186(180\u00b0)\u306e\u30e9\u30b8\u30a2\u30f3\u306f\u03c0[rad]\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u4e0a\u8a18\u306e\u95a2\u6570\u306f\u5ea6\u3092\u5f15\u6570\u3068\u3057\u3066\u53d7\u3051\u53d6\u308a\u3001\u3053\u306e180 : \u03c0[rad]\u306e\u6bd4\u7387\u3092\u4f7f\u3063\u3066\u30e9\u30b8\u30a2\u30f3\u306b\u5909\u63db\u3057\u3066\u3001\u7d50\u679c\u3092\u8fd4\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u7dda\u5f62\u5909\u63db\u3067\u51fa\u3066\u304f\u308b\u30b5\u30a4\u30f3\u3068\u30b3\u30b5\u30a4\u30f3\u306f\u3001JavaScript\u3067\u306fMath.cos()\u3001Math.sin()\u3067\u53d6\u5f97\u3067\u304d\u308b\u306e\u3067\u3059\u304c\u3001\u5f15\u6570\u306b\u30e9\u30b8\u30a2\u30f3\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002
\n\u306a\u306e\u3067\u3001\u5ea6\u304b\u3089\u30e9\u30b8\u30a2\u30f3\u3078\u306e\u5909\u63db\u51e6\u7406\u304c\u5fc5\u8981\u306b\u306a\u308b\u308f\u3051\u3067\u3059\u306d\u3002<\/p>\n
Math.cos()\u3084\u3001Math.sin()\u3001\u30e9\u30b8\u30a2\u30f3\u3092\u8a73\u3057\u304f\u77e5\u308a\u305f\u3044\u65b9\u306f\u4ee5\u4e0b\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n- Math.cos() – MDN<\/a><\/li>\n
- Math.sin() – MDN<\/a><\/li>\n
- \u30e9\u30b8\u30a2\u30f3 – wikipedia<\/a><\/li>\n<\/ul>\n
\u7dda\u5f62\u5909\u63db(\u56de\u8ee2)\u3092\u884c\u3046<\/h3>\n\/\/ \u753b\u9762\u306e\u4e2d\u5fc3\u3092\u539f\u70b9\u3068\u3057\u3066\u3001target \u3092\u7dda\u5f62\u5909\u63db\uff08\u56de\u8ee2\uff09\u3057\u3001\u5909\u63db\u5f8c\u306e\u4f4d\u7f6e\u3092\u8fd4\u5374\u3059\u308b\nconst linearTransformation = function (target, degree) {\n \/\/ \u30e9\u30b8\u30a2\u30f3\u3092\u53d6\u5f97\n const radian = convertToRadian(degree);\n\n \/\/ \u7dda\u5f62\u5909\u63db\u5f8c\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u5374\u3059\u308b\n return {\n x: target.x * Math.cos(radian) + target.y * -Math.sin(radian),\n y: target.x * Math.sin(radian) + target.y * Math.cos(radian),\n };\n};\n<\/pre>\n\u3055\u3066\u3001\u3088\u3046\u3084\u304f\u672c\u547d\u306e\u767b\u5834\u3067\u3059\u3002
\n\u4e0a\u8a18\u306f\u7dda\u5f62\u5909\u63db(\u56de\u8ee2)\u3092\u884c\u3046\u51e6\u7406\u3067\u3059\u3002<\/p>\n
\u307e\u305a\u5f15\u6570\u3068\u3057\u3066\u3001\u5909\u63db\u5bfe\u8c61\u306ex\u3001y\u3092\u6301\u3063\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8(target)\u3068\u3001\u56de\u8ee2\u3055\u305b\u308b\u89d2\u5ea6(degree)\u3092\u53d7\u3051\u53d6\u3063\u3066\u3044\u307e\u3059\u3002
\n\uff08\u203b\u5f15\u6570\u3067\u53d7\u3051\u53d6\u3063\u3066\u3044\u308bdegree\u306f\u30e9\u30b8\u30a2\u30f3\u3067\u306f\u306a\u304f\u5ea6\u3067\u3059\u3002\uff09<\/p>\n
\u6b21\u306b\u53d7\u3051\u53d6\u3063\u305f\u5ea6\u3092\u30e9\u30b8\u30a2\u30f3\u306b\u5909\u63db\u3057\u307e\u3059\u3002
\nradian = convertToRadian(degree)<\/strong>\u306e\u3068\u3053\u308d\u3067\u3059\u306d\u3002
\n\u305d\u3057\u3066\u3001\u30e9\u30b8\u30a2\u30f3\u3092\u5909\u63db\u884c\u5217\u306eMath.cos()\u3084\u3001Math.sin()\u306b\u3044\u308c\u3066\u7dda\u5f62\u5909\u63db\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n2×2\u306e\u884c\u5217\u30682×1\u306e\u884c\u5217\u306e\u7a4d\u306a\u306e\u3067\u3001\u6700\u7d42\u7684\u306b2×1\u306e\u884c\u5217(\u30d9\u30af\u30c8\u30eb)\u304c\u7b97\u51fa\u3055\u308c\u307e\u3059\u3002
\n\u3053\u306e\u8a08\u7b97\u7d50\u679c\u306ex\u3068y\u304c\u3001\u89d2\u5ea6\u5206\u3060\u3051\u79fb\u52d5\u3057\u305f\u5ea7\u6a19\u3068\u306a\u308a\u307e\u3059\u3002
\n\u3042\u3068\u306f\u3001\u8a08\u7b97\u7d50\u679c\u3092\u5143\u306b\u30dc\u30c3\u30af\u30b9\u3092\u63cf\u753b\u3059\u308b\u3060\u3051\u3067\u3059\u306d\u3002<\/p>\n
\u307e\u3068\u3081<\/h2>\n
\u4eca\u56de\u306f\u30b7\u30f3\u30d7\u30eb\u306a\u7dda\u5f62\u5909\u63db\u3092\u4f7f\u3063\u3066\u3001canvas\u4e0a\u306e\u30dc\u30c3\u30af\u30b9\u3092\u53cd\u6642\u8a08\u56de\u308a\u306b\u56de\u8ee2\u3055\u305b\u3066\u79fb\u52d5\u3055\u305b\u3066\u307f\u307e\u3057\u305f\u3002
\n\u3053\u3046\u3057\u3066canvas\u3092\u69cb\u7bc9\u3057\u3066\u307f\u308b\u3068\u3001JavaScript\u306e\u7df4\u7fd2\u306b\u3082\u306a\u308a\u307e\u3059\u3057\u3001\u6570\u5b66\u306e\u52c9\u5f37\u3082\u3067\u304d\u3066\u4e00\u77f3\u4e8c\u9ce5\u3067\u3059\u306d\u3002
\n\u6b21\u56de\u3082canvas\u3092\u89e6\u3063\u3066\u3044\u304d\u307e\u3059\uff01<\/p>\n