{"id":1537,"date":"2016-08-06T06:20:31","date_gmt":"2016-08-06T06:20:31","guid":{"rendered":"https:\/\/www.codebee.co.th\/labs\/?p=1537"},"modified":"2016-10-23T11:50:39","modified_gmt":"2016-10-23T11:50:39","slug":"html5-%e0%b9%82%e0%b8%ab%e0%b8%a5%e0%b8%94%e0%b8%a3%e0%b8%b9%e0%b8%9b%e0%b9%80%e0%b8%82%e0%b9%89%e0%b8%b2%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%aa%e0%b8%94%e0%b8%87%e0%b9%83%e0%b8%99-canvas-%e0%b8%94","status":"publish","type":"post","link":"https:\/\/www.codebee.co.th\/labs\/html5-%e0%b9%82%e0%b8%ab%e0%b8%a5%e0%b8%94%e0%b8%a3%e0%b8%b9%e0%b8%9b%e0%b9%80%e0%b8%82%e0%b9%89%e0%b8%b2%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%aa%e0%b8%94%e0%b8%87%e0%b9%83%e0%b8%99-canvas-%e0%b8%94\/","title":{"rendered":"HTML5 \u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e40\u0e02\u0e49\u0e32\u0e21\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e43\u0e19 Canvas \u0e14\u0e49\u0e27\u0e22 Ajax"},"content":{"rendered":"

HTML5 \u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e40\u0e02\u0e49\u0e32\u0e21\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e43\u0e19 Canvas \u0e14\u0e49\u0e27\u0e22 Ajax<\/h3>\n

<\/br>
\n\u0e43\u0e19 HTML5 Canvas \u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e43\u0e2b\u0e49\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e01\u0e48\u0e2d\u0e19\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e04\u0e25\u0e32\u0e2a new Image() \u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e2d\u0e35\u0e01\u0e23\u0e2d\u0e1a\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e01\u0e48\u0e2d\u0e19\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49
\n\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07 drawImage \u0e02\u0e2d\u0e07 context 2d \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e27\u0e32\u0e14\u0e23\u0e39\u0e1b\u0e43\u0e2b\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e1a\u0e19 Canvas
\n<\/p>\n

<\/br>
\n\u0e2a\u0e32\u0e40\u0e2b\u0e15\u0e38\u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e49\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e02\u0e2d\u0e07 Ajax \u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e01\u0e48\u0e2d\u0e19 \u0e01\u0e47\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e41\u0e19\u0e48\u0e43\u0e08\u0e27\u0e48\u0e32\u0e23\u0e39\u0e1b\u0e19\u0e31\u0e49\u0e19\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e41\u0e25\u0e49\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e43\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07 \u0e46
\n\u0e40\u0e23\u0e32\u0e2d\u0e32\u0e08\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e17\u0e33 preloading \u0e2b\u0e23\u0e37\u0e2d progress bar \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e43\u0e2b\u0e49\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e01\u0e48\u0e2d\u0e19\u0e17\u0e35\u0e48\u0e08\u0e30\u0e40\u0e23\u0e34\u0e48\u0e21\u0e17\u0e33\u0e07\u0e32\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e2d\u0e37\u0e48\u0e19 \u0e46<\/p>\n

<\/br><\/p>\n

\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e40\u0e02\u0e49\u0e32\u0e21\u0e32\u0e43\u0e19 HTML5 Canvas<\/h4>\n

\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07 canvas \u0e20\u0e32\u0e22\u0e43\u0e19 html body tag<\/p>\n

<canvas id=\"canvas\" width=\"800\" height=\"600\"><\/canvas><\/pre>\n
\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e43\u0e2b\u0e49\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2b\u0e23\u0e37\u0e2d\u0e17\u0e33 progress bar \u0e43\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e19\u0e35\u0e49 \u0e14\u0e49\u0e27\u0e22 Jquery Ajax<\/p>\n
\r\nvar imageURL = \"https:\/\/www.codebee.co.th\/images\/logo1@2x.png\";\r\nvar request = $.ajax({\r\n\turl: imageURL,\r\n\tcrossDomain: true,\r\n\ttype: \"HEAD\",\r\n\tcache: true,\r\n});\r\nrequest.done(function () {\r\n\t\t\t\r\n});<\/pre>\n
\u0e27\u0e32\u0e14\u0e23\u0e39\u0e1b\u0e25\u0e07\u0e43\u0e19 Canvas \u0e14\u0e49\u0e27\u0e22\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07 drawImage \u0e02\u0e2d\u0e07 Context 2D<\/p>\n
var img = new Image();\r\nimg.onload = function() {\r\n\tcontext.drawImage(this, (canvas.width*0.5)-(img.width*0.5), (canvas.height*0.5)-(img.height*0.5));\r\n};\r\nimg.src = imageURL;<\/pre>\n
\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 x \u0e41\u0e25\u0e30 y \u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b\u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e15\u0e23\u0e07\u0e01\u0e25\u0e32\u0e07\u0e42\u0e14\u0e22\u0e04\u0e33\u0e19\u0e27\u0e13\u0e08\u0e32\u0e01\u0e02\u0e19\u0e32\u0e14\u0e02\u0e2d\u0e07 canvas \u0e41\u0e25\u0e30\u0e02\u0e19\u0e32\u0e14\u0e23\u0e39\u0e1b<\/p>\n
context.drawImage(this, (canvas.width*0.5)-(img.width*0.5), (canvas.height*0.5)-(img.height*0.5));<\/pre>\n
\u0e43\u0e0a\u0e49 CSS \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e43\u0e2b\u0e49 Canvas Element \u0e2d\u0e22\u0e39\u0e48\u0e15\u0e23\u0e07\u0e01\u0e25\u0e32\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c<\/p>\n
<style>\r\ncanvas {\r\n\tpadding-left: 0;\r\n\tpadding-right: 0;\r\n\tmargin-left: auto;\r\n\tmargin-right: auto;\r\n\tdisplay: block;\r\n\twidth: 800px;\r\n}\r\n<\/style><\/pre>\n
\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e42\u0e04\u0e4a\u0e14\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\n
<html>\r\n  <head>\r\n  <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js\"><\/script>\r\n  <style>\r\n  \tcanvas {\r\n\t\tpadding-left: 0;\r\n\t\tpadding-right: 0;\r\n\t\tmargin-left: auto;\r\n\t\tmargin-right: auto;\r\n\t\tdisplay: block;\r\n\t\twidth: 800px;\r\n\t}\r\n  <\/style>\r\n  <\/head>\r\n  <body>\r\n    <canvas id=\"canvas\" width=\"800\" height=\"600\"><\/canvas>\r\n    <script>\r\n      var canvas = document.getElementById('canvas');\r\n\t  var context = canvas.getContext('2d');\r\n\t  canvas.style.backgroundColor = \"#d8322b\";\r\n\t  \r\n\t  var imageURL = \"https:\/\/www.codebee.co.th\/images\/logo1@2x.png\";\r\n\t  var request = $.ajax({\r\n\t\t\turl: imageURL,\r\n\t\t\tcrossDomain: true,\r\n\t\t\ttype: \"HEAD\",\r\n\t\t\tcache: true,\r\n\t\t});\r\n\t\trequest.done(function () {\r\n\t\t\tvar img = new Image();\r\n\t\t\timg.onload = function() {\r\n\t\t\t  context.drawImage(this, (canvas.width*0.5)-(img.width*0.5), (canvas.height*0.5)-(img.height*0.5));\r\n\t\t\t};\r\n\t\t\timg.src = imageURL;\r\n\t\t});\r\n    <\/script>\r\n  <\/body>\r\n<\/html>   <\/pre>\n
\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19 HTML5-\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e40\u0e02\u0e49\u0e32\u0e21\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e43\u0e19-Canvas-\u0e14\u0e49\u0e27\u0e22-Ajax.html<\/a>
\n