{"id":4966,"date":"2021-02-01T09:00:29","date_gmt":"2021-02-01T00:00:29","guid":{"rendered":"https:\/\/www.sria.co.jp\/blog\/?p=4966"},"modified":"2021-05-11T10:33:26","modified_gmt":"2021-05-11T01:33:26","slug":"4966","status":"publish","type":"post","link":"https:\/\/www.sria.co.jp\/blog\/2021\/02\/4966\/","title":{"rendered":"JS\u596e\u95d8\u8a18\u3010JavaScript\u3068canvas\u3068\u7dda\u5f62\u5909\u63db \u305d\u306e3 ~\u69d8\u3005\u306a\u7dda\u5f62\u5909\u63db\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\/4895\/\">\u524d\u56de<\/a>\u3001<a href=\"https:\/\/www.sria.co.jp\/blog\/2021\/01\/4784\/\">\u524d\u3005\u56de<\/a>\u306f\u53cd\u6642\u8a08\u56de\u308a\u306e\u7dda\u5f62\u5909\u63db\u3092\u6271\u3063\u3066\u304d\u307e\u3057\u305f\u3002<\/p>\n<p>\u5b9f\u306f\u7dda\u5f62\u5909\u63db\u306b\u306f\u56de\u8ee2\u4ee5\u5916\u306b\u3082\u3044\u304f\u3064\u304b\u7a2e\u985e\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u4eca\u56de\u306f canvas \u3067\u3088\u304f\u4f7f\u3044\u305d\u3046\u306a\u8a08\u7b97\u5f0f\u3092\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<h2>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306b\u3064\u3044\u3066<\/h2>\n<p>\u4eca\u56de\u7d39\u4ecb\u3059\u308b\u7dda\u5f62\u5909\u63db\u306e\u95a2\u6570\u306f\u3001\u4ee5\u4e0b\u306e main.js \u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<br \/>\n\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u69cb\u9020\u306f\u524d\u56de\u3001\u524d\u3005\u56de\u3068\u540c\u69d8\u3067\u3059\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/sriaTsuji\/public\/tree\/main\/canvas03\" target=\"_blank\" rel=\"noopener\">\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u4e00\u89a7<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/sriaTsuji\/public\/blob\/main\/canvas03\/index.html\" target=\"_blank\" rel=\"noopener\">index.html<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/sriaTsuji\/public\/blob\/main\/canvas03\/main.js\" target=\"_blank\" rel=\"noopener\">main.js<\/a><\/li>\n<\/ul>\n<h2>\u69d8\u3005\u306a\u7dda\u5f62\u5909\u63db<\/h2>\n<h3>x \u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3059\u308b<\/h3>\n<div><img loading=\"lazy\" class=\"aligncenter wp-image-4969 size-full\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image01-2.png\" alt=\"x \u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3059\u308b \u8a08\u7b97\u5f0f\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image01-2.png 1000w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image01-2-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image01-2-768x307.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<p>\u307e\u305a\u306f\u3058\u3081\u306b\u7d39\u4ecb\u3059\u308b\u306e\u306f x \u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3055\u305b\u308b\u8a08\u7b97\u5f0f\u3067\u3059\u3002<br \/>\nJavaScript \u3067\u8868\u3059\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u95a2\u6570\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u5f15\u6570\u306e target \u306b\u306f{x: x \u8ef8\u306e\u4f4d\u7f6e, y: y \u8ef8\u306e\u4f4d\u7f6e}\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u5165\u3063\u3066\u304d\u307e\u3059\u3002<br \/>\ntarget \u306e x\u3001y \u306b\u5bfe\u3057\u3066\u5909\u63db\u3092\u884c\u3044\u3001\u305d\u306e\u7d50\u679c\u3092\u8fd4\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre>\/\/ x\u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3059\u308b\u51e6\u7406\nconst inversionXTransformation = function (target) {\n  return {\n    x: target.x * 1 + target.y * 0,\n    y: target.x * 0 + target.y * -1\n  }\n}\n<\/pre>\n<p>\u5b9f\u969b\u306b canvas \u4e0a\u306b\u63cf\u753b\u3057\u3066\u307f\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u521d\u671f\u914d\u7f6e\u306e\u30dc\u30c3\u30af\u30b9\u304c\u8d64\u3067\u3059\u3002<br \/>\n\u8d64\u30dc\u30c3\u30af\u30b9\u3092 x \u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3057\u3001\u305d\u306e\u4f4d\u7f6e\u306b\u9752\u30dc\u30c3\u30af\u30b9\u3092\u63cf\u753b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter wp-image-4969 size-full\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image01-c.png\" alt=\"x \u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3059\u308b canvas\u4e0a\u3067\u306e\u63cf\u753b\u7d50\u679c\" width=\"1000\" height=\"400\" \/><\/div>\n<h3>y \u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3059\u308b<\/h3>\n<div><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4971\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-2-300x120.png\" alt=\"y \u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3059\u308b \u8a08\u7b97\u5f0f\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-2-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-2-768x307.png 768w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-2.png 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<p>x \u8ef8\u3068\u6765\u305f\u3089\u3001\u6b21\u306f y \u8ef8\u3067\u53cd\u8ee2\u3067\u3059\u306d\u3002\u8a08\u7b97\u5f0f\u306f\u4e0a\u8a18\u306e\u901a\u308a\u3067\u3059\u3002<br \/>\nJavaScript \u3067\u8868\u3059\u3068\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre>\/\/ y\u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3059\u308b\u51e6\u7406\nconst inversionYTransformation = function (target) {\n  return {\n    x: target.x * -1 + target.y * 0,\n    y: target.x * 0 + target.y * 1\n  }\n}\n<\/pre>\n<p>canvas \u4e0a\u306b\u63cf\u753b\u3057\u3066\u307f\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u3053\u3061\u3089\u3082\u8d64\u30dc\u30c3\u30af\u30b9\u304c\u521d\u671f\u914d\u7f6e\u306e\u30dc\u30c3\u30af\u30b9\u3067\u3059\u3002<br \/>\n\u8d64\u30dc\u30c3\u30af\u30b9\u3092 y \u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3057\u3066\u63cf\u753b\u3057\u305f\u306e\u304c\u3001\u7dd1\u30dc\u30c3\u30af\u30b9\u3067\u3059\u3002<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4970\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-c-300x120.png\" alt=\"y \u8ef8\u306b\u5bfe\u3057\u3066\u53cd\u8ee2\u3059\u308b canvas\u4e0a\u3067\u306e\u63cf\u753b\u7d50\u679c\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-c-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-c-768x307.png 768w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image02-c.png 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<h3>\u9577\u3055\uff08\u4f4d\u7f6e\uff09\u3092 n \u500d\u3059\u308b<\/h3>\n<div><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4973\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-2-300x120.png\" alt=\"\u9577\u3055\u3092 n \u500d\u306b\u3059\u308b \u8a08\u7b97\u5f0f\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-2-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-2-768x307.png 768w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-2.png 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<p>\u6b21\u306f\u9577\u3055\uff08\u4f4d\u7f6e\uff09\u3092 n \u500d\u3059\u308b\u8a08\u7b97\u5f0f\u3067\u3059\u3002<br \/>\nx \u306f nx \u3067\u4e57\u7b97\u3055\u308c\u3001y \u306f ny \u3067\u4e57\u7b97\u3055\u308c\u307e\u3059\u3002<br \/>\n\u7d50\u679c\u3068\u3057\u3066\u3001x \u3092 nx \u500d\u3057\u305f x&#8217; \u3068\u3001y \u3092 ny \u500d\u3057\u305f y&#8217; \u306e\u30d9\u30af\u30c8\u30eb\u304c\u5f97\u3089\u308c\u307e\u3059\u3002<br \/>\n\u4f8b\u3048\u3070 nx = 1\u3001ny = 2 \u3068\u3057\u305f\u5834\u5408\u3001x \u306f 1 \u500d\u3002y \u306f 2 \u500d\u3068\u306a\u308b\u305f\u3081\u3001\u6a2a\u5e45\u306f\u5909\u308f\u3089\u305a\u3002\u9ad8\u3055\u3060\u3051\u304c 2 \u500d\u3068\u306a\u308a\u307e\u3059\u3002<br \/>\nJavaScript \u3067\u8868\u3059\u3068\u3001\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<pre>\/\/ target\u306ex,y\u3092nx, ny\u500d\u3059\u308b\u51e6\u7406\nconst multipeTransformation = function (target, nx = 1, ny = 1) {\n  return {\n    x: target.x * nx + target.y * 0,\n    y: target.x * 0 + target.y * ny\n  }\n}\n<\/pre>\n<p>canvas \u4e0a\u306b\u63cf\u753b\u3057\u3066\u307f\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\nmultipeTransformation \u306e nx \u3068 ny \u306b 2 \u3092\u5165\u308c\u3066\u5b9f\u884c\u3057\u305f\u7d50\u679c\u3092\u63cf\u753b\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u521d\u671f\u914d\u7f6e\u306e\u8d64\u30dc\u30c3\u30af\u30b9\u304b\u3089\u3001x\u30fby \u3068\u3082\u306b 2 \u500d\u3057\u305f\u4f4d\u7f6e\u306b\u9ec4\u8272\u30dc\u30c3\u30af\u30b9\u304c\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4972\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-c-300x120.png\" alt=\"\u9577\u3055\u3092 n \u500d\u306b\u3059\u308b canvas\u4e0a\u3067\u306e\u63cf\u753b\u7d50\u679c\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-c-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-c-768x307.png 768w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image03-c.png 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<h3>x \u8ef8\u304b\u3089 \u03b8\u00b0 \u3067\u305b\u3093\u65ad\uff08\u659c\u3081\u306b\u3072\u3057\u3083\u3052\u308b\uff09<\/h3>\n<div><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4975\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-2-300x120.png\" alt=\"x \u8ef8\u304b\u3089 \u03b8\u00b0 \u3067\u305b\u3093\u65ad \u8a08\u7b97\u5f0f\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-2-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-2-768x307.png 768w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-2.png 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<p>\u305b\u3093\u65ad\u306e\u8a08\u7b97\u5f0f\u3067\u3059\u3002\u659c\u3081\u306b\u3072\u3057\u3083\u3052\u308b\u5909\u5f62\u3067\u3059\u306d\u3002<br \/>\n\u4e0a\u8a18\u306f x \u8ef8\u304b\u3089 \u03b8\u00b0 \u3067\u305b\u3093\u65ad\u3055\u305b\u308b\u8a08\u7b97\u5f0f\u3067\u3059\u3002<br \/>\nJavaScript \u3067\u8868\u3059\u3068\u3001\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<pre>\/\/ x\u8ef8\u304b\u3089\u03b8\u00b0\u3067\u305b\u3093\u65ad\u3059\u308b\u51e6\u7406\nconst shearXTransformation = function (target, degree = 0) {\n  \/\/ \u5ea6\u304b\u3089\u30e9\u30b8\u30a2\u30f3\u3092\u53d6\u5f97\n  const radian = convertToRadian(degree)\n  return {\n    x: target.x * 1 + target.y * 0,\n    y: target.x * Math.tan(radian) + target.y * 1\n  }\n}\n<\/pre>\n<p>\u305b\u3093\u65ad\u3092 canvas \u4e0a\u306b\u63cf\u753b\u3057\u3066\u307f\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u305b\u3093\u65ad\u524d\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u3001\u7e26 20x \u6a2a 20 \u306e\u6b63\u65b9\u5f62\u3067\u3001\u5de6\u4e0b\u306e\u70b9\u304c\u539f\u70b9\u3068\u91cd\u306a\u308b\u4f4d\u7f6e\u306b\u3044\u307e\u3057\u305f\u3002<br \/>\n\u305d\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092 x \u8ef8\u306b\u5bfe\u3057\u3066 60\u00b0 \u3067\u305b\u3093\u65ad\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u7d50\u679c\u7684\u306b\u3001\u5e73\u884c\u56db\u8fba\u5f62\u3092\u63cf\u304f\u4e8b\u304c\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter size-full wp-image-4974\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-c-300x120.png\" alt=\"x \u8ef8\u304b\u3089 \u03b8\u00b0 \u3067\u305b\u3093\u65ad canvas\u4e0a\u3067\u306e\u63cf\u753b\u7d50\u679c\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-c-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-c-768x307.png 768w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image04-c.png 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<h3>y \u8ef8\u304b\u3089 \u03b8\u00b0 \u3067\u305b\u3093\u65ad<\/h3>\n<div><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-4977\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-2-300x120.png\" alt=\"y \u8ef8\u304b\u3089 \u03b8\u00b0 \u3067\u305b\u3093\u65ad \u8a08\u7b97\u5f0f\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-2-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-2-768x307.png 768w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-2.png 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<p>\u6700\u5f8c\u306f y \u8ef8\u304b\u3089 \u03b8\u00b0 \u3067\u305b\u3093\u65ad\u3055\u305b\u308b\u8a08\u7b97\u5f0f\u3067\u3059\u3002<br \/>\nJavaScript \u3067\u8868\u3059\u3068\u3001\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<pre>\/\/ y\u8ef8\u304b\u3089\u03b8\u00b0\u3067\u305b\u3093\u65ad\u3059\u308b\u51e6\u7406\nconst shearYTransformation = function (target, degree = 0) {\n  \/\/ \u5ea6\u304b\u3089\u30e9\u30b8\u30a2\u30f3\u3092\u53d6\u5f97\n  const radian = convertToRadian(degree)\n  return {\n    x: target.x * 1 + target.y * Math.tan(radian),\n    y: target.x * 0 + target.y * 1\n  }\n}\n<\/pre>\n<p>canvas \u4e0a\u306b\u63cf\u753b\u3057\u3066\u307f\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\ny \u8ef8\u306b\u5bfe\u3057\u3066 60\u00b0 \u3067\u305b\u3093\u65ad\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<div><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-4976\" src=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-c-300x120.png\" alt=\"y \u8ef8\u304b\u3089 \u03b8\u00b0 \u3067\u305b\u3093\u65ad canvas\u4e0a\u3067\u306e\u63cf\u753b\u7d50\u679c\" width=\"1000\" height=\"400\" srcset=\"https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-c-300x120.png 300w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-c-768x307.png 768w, https:\/\/www.sria.co.jp\/blog\/wp-content\/uploads\/2021\/01\/image05-c.png 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<h2>\u307e\u3068\u3081<\/h2>\n<p>\u3055\u3066\u3001\u4eca\u56de\u306f\u69d8\u3005\u306a\u7dda\u5f62\u5909\u63db\u3092\u898b\u3066\u304d\u307e\u3057\u305f\u3002<br \/>\n\u4ed6\u306b\u3082\u69d8\u3005\u306a\u30bf\u30a4\u30d7\u304c\u3042\u308b\u306e\u3067\u3001\u6c17\u306b\u306a\u308b\u65b9\u306f\u305c\u3072\u8abf\u3079\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff01<br \/>\n<a href=\"https:\/\/ja.wikipedia.org\/wiki\/%E7%B7%9A%E5%9E%8B%E5%86%99%E5%83%8F#%E8%A1%8C%E5%88%97%E8%A1%A8%E7%8F%BE\" target=\"_blank\" rel=\"noopener\">\u7dda\u5f62\u5909\u63db wikipedia<\/a><\/p>\n<p>\u6b21\u56de\u306e\u8a18\u4e8b: <a href=\"https:\/\/www.sria.co.jp\/blog\/2021\/02\/5005\/\">JS\u596e\u95d8\u8a18\u3010JavaScript\u3068canvas\u3068\u7dda\u5f62\u5909\u63db \u305d\u306e4 ~\u7dda\u5f62\u5909\u63db\u306e\u30dd\u30a4\u30f3\u30c8\u3068\u884c\u5217\u7a4d\u306e\u7279\u5fb4\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\u3001\u524d\u3005\u56de\u306f\u53cd\u6642\u8a08\u56de\u308a\u306e\u7dda\u5f62\u5909\u63db\u3092\u6271\u3063\u3066\u304d\u307e\u3057\u305f\u3002 \u5b9f\u306f\u7dda\u5f62\u5909\u63db\u306b\u306f\u56de\u8ee2\u4ee5\u5916\u306b\u3082\u3044\u304f\u3064\u304b\u7a2e\u985e\u304c\u3042\u308a\u307e\u3059\u3002 \u4eca\u56de\u306f canvas \u3067\u3088\u304f\u4f7f\u3044\u305d\u3046\u306a\u8a08\u7b97\u5f0f\u3092\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\u3002 \u30bd\u30fc\u30b9\u30b3\u30fc\u30c9&#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\/4966"}],"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=4966"}],"version-history":[{"count":33,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4966\/revisions"}],"predecessor-version":[{"id":5299,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4966\/revisions\/5299"}],"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=4966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/categories?post=4966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/tags?post=4966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}