{"id":5088,"date":"2012-03-28T09:50:24","date_gmt":"2012-03-28T02:50:24","guid":{"rendered":"http:\/\/www.arit.rmutp.ac.th\/kms\/?p=5088"},"modified":"2013-09-20T15:43:18","modified_gmt":"2013-09-20T08:43:18","slug":"%e0%b8%a7%e0%b8%b4%e0%b9%88%e0%b8%87%e0%b9%80%e0%b8%94%e0%b8%b4%e0%b8%99%e0%b8%ab%e0%b8%99%e0%b9%89%e0%b8%b2%e0%b8%96%e0%b8%ad%e0%b8%a2%e0%b8%ab%e0%b8%a5%e0%b8%b1%e0%b8%87-html5","status":"publish","type":"post","link":"https:\/\/arit.rmutp.ac.th\/kms\/%e0%b8%a7%e0%b8%b4%e0%b9%88%e0%b8%87%e0%b9%80%e0%b8%94%e0%b8%b4%e0%b8%99%e0%b8%ab%e0%b8%99%e0%b9%89%e0%b8%b2%e0%b8%96%e0%b8%ad%e0%b8%a2%e0%b8%ab%e0%b8%a5%e0%b8%b1%e0%b8%87-html5\/","title":{"rendered":"\u0e27\u0e34\u0e48\u0e07\u0e40\u0e14\u0e34\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e16\u0e2d\u0e22\u0e2b\u0e25\u0e31\u0e07 HTML5"},"content":{"rendered":"

\"\"<\/a><\/p>\n

\u0e42\u0e14\u0e22 \u0e2a\u0e21\u0e42\u0e20\u0e0a\u0e19\u0e4c \u0e01\u0e38\u0e25\u0e18\u0e32\u0e23\u0e32\u0e23\u0e21\u0e13\u0e4c<\/p>\n

<\/p>\n

<!DOCTYPE HTML><\/p>\n

<html>
\n<head>
\n<style>
\nbody {\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 margin: 0px;\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding: 0px;\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }
\n#myCanvas {\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border: 1px solid #9C9898;\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }
\n<\/style>
\n<script>
\nwindow.requestAnimFrame = (function(callback)
\n{
\nreturn window.requestAnimationFrame ||
\nwindow.webkitRequestAnimationFrame ||
\nwindow.mozRequestAnimationFrame ||
\nwindow.oRequestAnimationFrame ||
\nwindow.msRequestAnimationFrame ||
\nfunction(callback){
\nwindow.setTimeout(callback, 1000 \/ 60);
\n};
\n})();
\nfunction animate(myRectangle)
\n{
\nvar canvas = document.getElementById(\u201cmyCanvas\u201d);
\nvar context = canvas.getContext(\u201c2d\u201d);\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ update
\nvar date = new Date();
\nvar time = date.getTime();
\nvar amplitude = 150;
\nvar period = 2000; \/\/ in ms
\nvar centerX = canvas.width \/ 2 \u2013 myRectangle.width \/ 2;
\nvar nextX = amplitude * Math.sin(time * 2 * Math.PI \/ period) + centerX;
\nmyRectangle.x = nextX;\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ clear
\ncontext.clearRect(0, 0, canvas.width, canvas.height);\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ draw
\ncontext.beginPath();
\ncontext.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
\ncontext.fillStyle = \u201c#8ED6FF\u201d;
\ncontext.fill();
\ncontext.lineWidth = myRectangle.borderWidth;
\ncontext.strokeStyle = \u201cblack\u201d;
\ncontext.stroke();\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ request new frame
\nrequestAnimFrame(function()
\n{
\nanimate(myRectangle);\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });
\n}<\/p>\n

window.onload = function()
\n{
\nvar myRectangle =
\n{
\nx: 250,\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 y: 70,\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 100,\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 50,\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 borderWidth: 5
\n};
\nanimate(myRectangle);
\n};
\n<\/script>
\n<\/head>
\n<body onmousedown=\u201dreturn false;\u201d>
\n<canvas id=\u201dmyCanvas\u201d width=\u201d578\u2033 height=\u201d200\u2033>
\n<\/canvas>
\n<\/body>
\n<\/html><\/p>\n

 <\/p>\n

\"\"<\/a><\/p>\n

\n","protected":false},"excerpt":{"rendered":"

\u0e42\u0e14\u0e22 \u0e2a\u0e21\u0e42\u0e20\u0e0a\u0e19\u0e4c \u0e01\u0e38\u0e25\u0e18\u0e32\u0e23\u0e32\u0e23\u0e21\u0e13\u0e4c<\/p>\n","protected":false},"author":1,"featured_media":5689,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[3],"tags":[],"class_list":["post-5088","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3"],"rttpg_featured_image_url":{"full":["https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/03\/index.jpg",289,174,false],"landscape":["https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/03\/index.jpg",289,174,false],"portraits":["https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/03\/index.jpg",289,174,false],"thumbnail":["https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/03\/index-150x150.jpg",150,150,true],"medium":["https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/03\/index.jpg",289,174,false],"large":["https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/03\/index.jpg",289,174,false],"folio":["https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/03\/index.jpg",289,174,false],"1536x1536":["https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/03\/index.jpg",289,174,false],"2048x2048":["https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/03\/index.jpg",289,174,false],"sow-carousel-default":["https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/03\/index.jpg",272,164,false]},"rttpg_author":{"display_name":"admin","author_link":"https:\/\/arit.rmutp.ac.th\/kms\/author\/admin\/"},"rttpg_comment":0,"rttpg_category":"\u0e04\u0e25\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49 \u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28<\/a>","rttpg_excerpt":"\u0e42\u0e14\u0e22 \u0e2a\u0e21\u0e42\u0e20\u0e0a\u0e19\u0e4c \u0e01\u0e38\u0e25\u0e18\u0e32\u0e23\u0e32\u0e23\u0e21\u0e13\u0e4c","_links":{"self":[{"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/posts\/5088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/comments?post=5088"}],"version-history":[{"count":5,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/posts\/5088\/revisions"}],"predecessor-version":[{"id":5695,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/posts\/5088\/revisions\/5695"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/media\/5689"}],"wp:attachment":[{"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/media?parent=5088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/categories?post=5088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/tags?post=5088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}