{"id":4366,"date":"2018-02-05T10:35:44","date_gmt":"2018-02-05T10:35:44","guid":{"rendered":"https:\/\/www.codebee.co.th\/labs\/?p=4366"},"modified":"2018-02-05T10:35:44","modified_gmt":"2018-02-05T10:35:44","slug":"html5-canvas-%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b8%97%e0%b8%b3-animation-%e0%b8%88%e0%b8%b2%e0%b8%81-sprite-sheet-frame-frame","status":"publish","type":"post","link":"https:\/\/www.codebee.co.th\/labs\/html5-canvas-%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b8%97%e0%b8%b3-animation-%e0%b8%88%e0%b8%b2%e0%b8%81-sprite-sheet-frame-frame\/","title":{"rendered":"html5 Canvas \u0e27\u0e34\u0e18\u0e35\u0e17\u0e33 Animation \u0e08\u0e32\u0e01 Sprite Sheet"},"content":{"rendered":"<h2>html5 Canvas \u0e27\u0e34\u0e18\u0e35\u0e17\u0e33 Animation \u0e08\u0e32\u0e01 Sprite Sheet<\/h2>\n<p><strong>html5 Canvas \u0e27\u0e34\u0e18\u0e35\u0e17\u0e33 Animation \u0e08\u0e32\u0e01 Sprite Sheet ( Frame by frame )<\/strong><\/p>\n<p>Sprite Sheet \u0e2b\u0e21\u0e32\u0e22\u0e16\u0e36\u0e07\u0e23\u0e39\u0e1b\u0e41\u0e1c\u0e48\u0e19\u0e43\u0e2b\u0e0d\u0e48\u0e17\u0e35\u0e48\u0e20\u0e32\u0e22\u0e43\u0e19\u0e08\u0e30\u0e40\u0e01\u0e47\u0e1a\u0e23\u0e39\u0e1b\u0e22\u0e48\u0e2d\u0e22 \u0e46 \u0e44\u0e27\u0e49\u0e2d\u0e35\u0e01\u0e2b\u0e25\u0e32\u0e22\u0e23\u0e39\u0e1b \u0e41\u0e25\u0e49\u0e27\u0e04\u0e48\u0e2d\u0e22\u0e19\u0e33\u0e21\u0e32\u0e15\u0e31\u0e14\u0e41\u0e1a\u0e48\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e49\u0e2d\u0e07\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19 \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e0a\u0e48\u0e19\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e02\u0e19\u0e32\u0e14 1024&#215;1024 pixel \u0e2d\u0e32\u0e08\u0e08\u0e30\u0e21\u0e35\u0e17\u0e31\u0e49\u0e07\u0e23\u0e39\u0e1b\u0e15\u0e49\u0e19\u0e44\u0e21\u0e49 \u0e04\u0e19 \u0e44\u0e2d\u0e40\u0e17\u0e21\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e43\u0e19\u0e40\u0e01\u0e21\u0e2a\u0e4c \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e15\u0e49\u0e19\u0e44\u0e21\u0e49 \u0e01\u0e47\u0e44\u0e1b\u0e04\u0e23\u0e2d\u0e1b\u0e40\u0e2d\u0e32\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e15\u0e49\u0e19\u0e44\u0e21\u0e49\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19\u0e21\u0e32\u0e41\u0e2a\u0e14\u0e07 \u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1c\u0e48\u0e19\u0e43\u0e2b\u0e0d\u0e48\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e04\u0e23\u0e31\u0e49\u0e07\u0e40\u0e14\u0e35\u0e22\u0e27 \u0e41\u0e15\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49\u0e44\u0e14\u0e49\u0e01\u0e31\u0e1a\u0e2b\u0e25\u0e32\u0e22 \u0e46 \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e07\u0e32\u0e19<!--more--><\/p>\n<p>\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a sprite sheet \u0e01\u0e47\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e02\u0e2d\u0e07\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e25\u0e14\u0e1b\u0e23\u0e34\u0e21\u0e32\u0e13\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e21\u0e32\u0e01\u0e40\u0e01\u0e34\u0e19\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19 \u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e40\u0e01\u0e21\u0e2b\u0e23\u0e37\u0e2d\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e17\u0e33\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\u0e40\u0e23\u0e47\u0e27\u0e02\u0e36\u0e49\u0e19<\/p>\n<p><strong>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 Animation frame by frame \u0e08\u0e32\u0e01 Sprite Sheet<\/strong><br \/>\n<img decoding=\"async\" src=\"https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2018\/02\/html5canvas_animation.gif\" alt=\"html5canvas_animation\" \/><\/p>\n<p>\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 \u0e41\u0e25\u0e30\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e42\u0e04\u0e4a\u0e14 <a href=\"https:\/\/www.codebee.co.th\/labs\/examples\/html5canvas_animate\/html5canvas_animate.html\" target=\"_blank\" rel=\"noopener\">html5 Canvas \u0e27\u0e34\u0e18\u0e35\u0e17\u0e33 Animation \u0e08\u0e32\u0e01 Sprite Sheet<\/a><\/p>\n<h4>\u0e42\u0e2b\u0e25\u0e14 sprite sheet \u0e41\u0e25\u0e30\u0e17\u0e33 Animate \u0e41\u0e1a\u0e1a frame by frame<\/h4>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><strong>\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c sprite sheet<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u0e43\u0e0a\u0e49\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c sprite sheet \u0e40\u0e0a\u0e48\u0e19\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21 TexturePacker \u0e2b\u0e23\u0e37\u0e2d\u0e25\u0e2d\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e23\u0e39\u0e1b\u0e21\u0e32\u0e44\u0e27\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e14\u0e2a\u0e2d\u0e1a \u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e19\u0e35\u0e49<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2018\/02\/walking.png\" alt=\"html5 canvas \u0e27\u0e34\u0e18\u0e35\u0e17\u0e33 animation \u0e08\u0e32\u0e01 sprite sheet\" \/><\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><strong>\u0e2a\u0e23\u0e49\u0e32\u0e07 canvas div<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 html body \u0e43\u0e2b\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07 div \u0e41\u0e25\u0e30\u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d id \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n<pre class=\"lang:default decode:true \">\r\n\r\n\t\r\n\r\n\r\n\t<canvas id=\"canvas\"><\/canvas>\r\n\r\n\r\n<\/pre>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><strong>\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2b\u0e25\u0e31\u0e01 \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e40\u0e02\u0e49\u0e32\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e43\u0e19 Canvas<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">var hero; \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e48\u0e19\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23 \u0e27\u0e32\u0e14\u0e41\u0e25\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e27\u0e19\u0e41\u0e15\u0e48\u0e25\u0e30\u0e40\u0e1f\u0e23\u0e21\r\nvar heroSrc; \/\/ \u0e1e\u0e32\u0e18\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b\u0e17\u0e35\u0e48 sprite \u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e27\u0e32\u0e14\u0e25\u0e07\u0e1a\u0e19 canvas\r\nvar canvas; \/\/ canvas \u0e2b\u0e23\u0e37\u0e2d\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e2b\u0e25\u0e31\u0e01\u0e17\u0e35\u0e48\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25 animation\r\n\r\ncanvas = document.getElementById(\"canvas\");\r\ncanvas.width = 324; \/\/ \u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07\u0e02\u0e2d\u0e07 canvas\r\ncanvas.height = 324; \/\/ \u0e04\u0e27\u0e32\u0e21\u0e2a\u0e39\u0e07\u0e02\u0e2d\u0e07 canvas\r\n\r\n\r\nheroSrc = new Image();\t\r\nheroSrc.addEventListener(\"load\", loopHero); \/\/ \u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e34\u0e48\u0e21\u0e17\u0e33\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e48\u0e19 loopHero\r\nheroSrc.src = \"walking.png\"; \/\/ \u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b sprite sheet<\/pre>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><strong>\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e48\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e27\u0e32\u0e14\u0e41\u0e15\u0e48\u0e25\u0e30\u0e40\u0e1f\u0e23\u0e21\u0e25\u0e07\u0e1a\u0e19 canvas \u0e41\u0e25\u0e30\u0e27\u0e19 loop frame<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u0e08\u0e32\u0e01\u0e23\u0e39\u0e1b\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 \u0e08\u0e30\u0e21\u0e35\u0e02\u0e19\u0e32\u0e14 1980&#215;324 px \u0e41\u0e25\u0e30\u0e21\u0e35\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 12 \u0e40\u0e1f\u0e23\u0e21 \u0e43\u0e19\u0e01\u0e32\u0e23\u0e27\u0e32\u0e14\u0e41\u0e15\u0e48\u0e25\u0e30\u0e04\u0e23\u0e31\u0e49\u0e07 \u0e08\u0e30\u0e40\u0e17\u0e48\u0e32\u0e01\u0e31\u0e1a 1980\/12 = 165 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e09\u0e30\u0e19\u0e31\u0e49\u0e19\u0e41\u0e15\u0e48\u0e25\u0e30\u0e23\u0e39\u0e1b\u0e08\u0e30\u0e21\u0e35\u0e02\u0e19\u0e32\u0e14 165&#215;324 \u0e43\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e23\u0e39\u0e1b sprite sheet \u0e19\u0e31\u0e49\u0e19 \u0e02\u0e19\u0e32\u0e14\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e19\u0e33\u0e21\u0e32\u0e2b\u0e32\u0e23\u0e14\u0e49\u0e27\u0e22\u0e08\u0e33\u0e19\u0e27\u0e19\u0e40\u0e1f\u0e23\u0e21\u0e44\u0e14\u0e49\u0e25\u0e07\u0e15\u0e31\u0e27 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49 animation \u0e14\u0e39 smooth \u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14<\/p>\n<p><strong>\/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e48\u0e19 update \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e19\u0e31\u0e1a\u0e08\u0e33\u0e19\u0e27\u0e19\u0e40\u0e1f\u0e23\u0e21 \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e47\u0e43\u0e2b\u0e49\u0e27\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e17\u0e35\u0e48\u0e40\u0e1f\u0e23\u0e21\u0e41\u0e23\u0e01\u0e43\u0e2b\u0e21\u0e48<\/strong><\/p>\n<pre class=\"lang:default decode:true \">function sprite (options) {\r\n\tvar ops = {},\r\n\t\tframeIndex = 0,\r\n\t\ttickCount = 0,\r\n\t\tticksPerFrame = options.ticksPerFrame || 0,\r\n\t\tnumberOfFrames = options.numberOfFrames || 1;\r\n\t\r\n\tops.context = options.context;\r\n\tops.width = options.width;\r\n\tops.height = options.height;\r\n\tops.image = options.image;\r\n\t\r\n\t\r\n\tops.update = function () {\r\n\t\ttickCount += 1;\r\n\t\tif (tickCount &gt; ticksPerFrame) {\r\n\t\t\ttickCount = 0;\r\n\t\t\tif (frameIndex &lt; numberOfFrames - 1) {\r\n\t\t\t\tframeIndex += 1;\r\n\t\t\t} else {\r\n\t\t\t\tframeIndex = 0;\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n<\/pre>\n<p><strong>\/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e48\u0e19 render \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e27\u0e32\u0e14\u0e41\u0e15\u0e48\u0e25\u0e30\u0e23\u0e39\u0e1b\u0e25\u0e07\u0e44\u0e1b\u0e1a\u0e19 canvas <\/strong><br \/>\n\u0e43\u0e0a\u0e49\u0e40\u0e21\u0e18\u0e2d\u0e14 context.drawImage() \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e17\u0e35\u0e48\u0e08\u0e30\u0e40\u0e23\u0e34\u0e48\u0e21\u0e27\u0e32\u0e14\u0e41\u0e25\u0e30\u0e02\u0e19\u0e32\u0e14\u0e02\u0e2d\u0e07\u0e41\u0e15\u0e48\u0e25\u0e30\u0e40\u0e1f\u0e23\u0e21<\/p>\n<pre class=\"lang:default decode:true \">\tops.render = function () {\r\n\t  this.context.clearRect(0, 0, this.width, this.height); \/\/ \u0e40\u0e04\u0e25\u0e35\u0e22\u0e23\u0e4c\u0e23\u0e39\u0e1b\u0e40\u0e01\u0e48\u0e32\u0e17\u0e38\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07\u0e01\u0e48\u0e2d\u0e19\u0e27\u0e32\u0e14\u0e23\u0e39\u0e1b\u0e43\u0e2b\u0e21\u0e48\u0e25\u0e07\u0e44\u0e1b\r\n\t  this.context.drawImage(\r\n\t\tthis.image,\r\n\t\tframeIndex * this.width \/ numberOfFrames,\r\n\t\t0,\r\n\t\tthis.width \/ numberOfFrames,\r\n\t\tthis.height,\r\n\t\t0,\r\n\t\t0,\r\n\t\tthis.width \/ numberOfFrames,\r\n\t\tthis.height);\r\n\t};\r\n\t\r\n\treturn ops;\r\n}<\/pre>\n<p><strong>\/\/ \u0e04\u0e27\u0e32\u0e21\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e2d\u0e07 \u0e1e\u0e32\u0e23\u0e32\u0e21\u0e34\u0e40\u0e15\u0e2d\u0e23\u0e4c (Parameters) \u0e41\u0e15\u0e48\u0e25\u0e30\u0e15\u0e31\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e21\u0e18\u0e2d\u0e14 drawImage()<\/strong><br \/>\n<ins datetime=\"2018-02-05T08:51:18+00:00\"><\/ins><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2018\/02\/html5_drawImage.png\" alt=\"html5_drawImage\" \/><\/p>\n<p>\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 \u0e41\u0e25\u0e30\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e42\u0e04\u0e4a\u0e14 <a href=\"https:\/\/www.codebee.co.th\/labs\/examples\/html5canvas_animate\/html5canvas_animate.html\" target=\"_blank\" rel=\"noopener\">html5 Canvas \u0e27\u0e34\u0e18\u0e35\u0e17\u0e33 Animation \u0e08\u0e32\u0e01 Sprite Sheet<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>html5 Canvas \u0e27\u0e34\u0e18\u0e35\u0e17\u0e33 Animation \u0e08\u0e32\u0e01 Sprite Sheet html5 Canvas \u0e27\u0e34\u0e18\u0e35\u0e17\u0e33 Animation \u0e08\u0e32\u0e01 Sprite Sheet ( Frame by frame ) Sprite&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4385,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"video","meta":{"footnotes":""},"categories":[46],"tags":[1829,403,202,1833,1832,1831,1830],"class_list":["post-4366","post","type-post","status-publish","format-video","has-post-thumbnail","hentry","category-website-development-","tag-canvas","tag-html5","tag-html5-canvas","tag-html5-canvas-animation","tag-sprite-sheet","tag--animation","tag--animation--sprite-sheet","post_format-post-format-video"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/4366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/comments?post=4366"}],"version-history":[{"count":33,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/4366\/revisions"}],"predecessor-version":[{"id":4403,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/4366\/revisions\/4403"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/media\/4385"}],"wp:attachment":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/media?parent=4366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/categories?post=4366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/tags?post=4366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}