{"id":5081,"date":"2012-03-28T09:42:15","date_gmt":"2012-03-28T02:42:15","guid":{"rendered":"http:\/\/www.arit.rmutp.ac.th\/kms\/?p=5081"},"modified":"2013-09-20T15:44:06","modified_gmt":"2013-09-20T08:44:06","slug":"click-%e0%b8%ab%e0%b8%a2%e0%b8%b8%e0%b8%94-click-%e0%b9%80%e0%b8%94%e0%b8%b4%e0%b8%99-html5","status":"publish","type":"post","link":"https:\/\/arit.rmutp.ac.th\/kms\/click-%e0%b8%ab%e0%b8%a2%e0%b8%b8%e0%b8%94-click-%e0%b9%80%e0%b8%94%e0%b8%b4%e0%b8%99-html5\/","title":{"rendered":"click \u0e2b\u0e22\u0e38\u0e14 click \u0e40\u0e14\u0e34\u0e19 HTML5"},"content":{"rendered":"<p style=\"text-align: center\"><a href=\"http:\/\/www.arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/08\/HTML5_Logo.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-4888\" style=\"border: 0px none\" alt=\"\" src=\"http:\/\/www.arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/08\/HTML5_Logo.jpg\" width=\"184\" height=\"184\" srcset=\"https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/08\/HTML5_Logo.jpg 512w, https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/08\/HTML5_Logo-150x150.jpg 150w, https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/08\/HTML5_Logo-300x300.jpg 300w\" sizes=\"(max-width: 184px) 100vw, 184px\" \/><\/a><\/p>\n<p style=\"text-align: right\">\u0e42\u0e14\u0e22 \u0e2a\u0e21\u0e42\u0e20\u0e0a\u0e19\u0e4c \u0e01\u0e38\u0e25\u0e18\u0e32\u0e23\u0e32\u0e23\u0e21\u0e13\u0e4c<\/p>\n<p style=\"text-align: center\"><!--more--><\/p>\n<div>\n<div><code>&lt;!DOCTYPE HTML&gt;<\/code><\/div>\n<div><code>&lt;<\/code><code>html<\/code><code>&gt;<\/code><\/div>\n<div><code>&lt;<\/code><code>head<\/code><code>&gt;<\/code><\/div>\n<div><code>&lt;<\/code><code>style<\/code><code>&gt;<\/code><\/div>\n<div><code>body {<\/code><\/div>\n<div><code>margin: 0px;<\/code><\/div>\n<div><code>padding: 0px;<\/code><\/div>\n<div><code>}<\/code><\/div>\n<div><code>#myCanvas {<\/code><\/div>\n<div><code>border: 1px solid #9C9898;<\/code><\/div>\n<div><code>}<\/code><\/div>\n<div><code>&lt;\/<\/code><code>style<\/code><code>&gt;<\/code><\/div>\n<div><code>&lt;<\/code><code>script<\/code><code>&gt;<\/code><\/div>\n<div><code>window.requestAnimFrame = (function(callback){<\/code><\/div>\n<div><code>return window.requestAnimationFrame ||<\/code><\/div>\n<div><code>window.webkitRequestAnimationFrame ||<\/code><\/div>\n<div><code>window.mozRequestAnimationFrame ||<\/code><\/div>\n<div><code>window.oRequestAnimationFrame ||<\/code><\/div>\n<div><code>window.msRequestAnimationFrame ||<\/code><\/div>\n<div><code>function(callback){<\/code><\/div>\n<div><code>window.setTimeout(callback, 1000 \/ 60);<\/code><\/div>\n<div><code>};<\/code><\/div>\n<div><code>})();<\/code><\/div>\n<div><code>function drawRect(myRectangle){<\/code><\/div>\n<div><code>var canvas = document.getElementById(\"myCanvas\");<\/code><\/div>\n<div><code>var context = canvas.getContext(\"2d\");<\/code><\/div>\n<div><code>context.beginPath();<\/code><\/div>\n<div><code>context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);<\/code><\/div>\n<div><code>context.fillStyle = \"#8ED6FF\";<\/code><\/div>\n<div><code>context.fill();<\/code><\/div>\n<div><code>context.lineWidth = myRectangle.borderWidth;<\/code><\/div>\n<div><code>context.strokeStyle = \"black\";<\/code><\/div>\n<div><code>context.stroke();<\/code><\/div>\n<div><code>}<\/code><\/div>\n<div><code>function animate(lastTime, myRectangle, animProp){<\/code><\/div>\n<div><code>if (animProp.animate) {<\/code><\/div>\n<div><code>var canvas = document.getElementById(\"myCanvas\");<\/code><\/div>\n<div><code>var context = canvas.getContext(\"2d\");<\/code><\/div>\n<div><code>\/\/ update<\/code><\/div>\n<div><code>var date = new Date();<\/code><\/div>\n<div><code>var time = date.getTime();<\/code><\/div>\n<div><code>var timeDiff = time - lastTime;<\/code><\/div>\n<div><code>var linearSpeed = 100;<\/code><\/div>\n<div><code>\/\/ pixels \/ second<\/code><\/div>\n<div><code>var linearDistEachFrame = linearSpeed * timeDiff \/ 1000;<\/code><\/div>\n<div><code>var currentX = myRectangle.x;<\/code><\/div>\n<div><code>if (currentX &lt; <\/code><code>canvas.width<\/code> <code>- myRectangle.width - myRectangle.borderWidth \/ 2) {<\/code><\/div>\n<div><code>var <\/code><code>newX<\/code> <code>= <\/code><code>currentX<\/code> <code>+ linearDistEachFrame;<\/code><\/div>\n<div><code>myRectangle.x<\/code> <code>= <\/code><code>newX<\/code><code>;<\/code><\/div>\n<div><code>}<\/code><\/div>\n<div><code>lastTime<\/code> <code>= <\/code><code>time<\/code><code>;<\/code><\/div>\n<div><code>\/\/ clear<\/code><\/div>\n<div><code>context.clearRect(0, 0, canvas.width, canvas.height);<\/code><\/div>\n<div><code>\/\/ draw<\/code><\/div>\n<div><code>drawRect(myRectangle);<\/code><\/div>\n<div><code>\/\/ request new frame<\/code><\/div>\n<div><code>requestAnimFrame(function(){<\/code><\/div>\n<div><code>animate(lastTime, myRectangle, animProp);<\/code><\/div>\n<div><code>});<\/code><\/div>\n<div><code>}<\/code><\/div>\n<div><code>}<\/code><\/div>\n<div><code>window.onload<\/code> <code>= <\/code><code>function<\/code><code>(){<\/code><\/div>\n<div><code>var myRectangle = {<\/code><\/div>\n<div><code>x: 0,<\/code><\/div>\n<div><code>y: 50,<\/code><\/div>\n<div><code>width: 100,<\/code><\/div>\n<div><code>height: 50,<\/code><\/div>\n<div><code>borderWidth: 5<\/code><\/div>\n<div><code>};<\/code><\/div>\n<div><code>\/*<\/code><\/div>\n<div><code>* make the animation properties an object<\/code><\/div>\n<div><code>* so that it can be modified by reference<\/code><\/div>\n<div><code>* from an event<\/code><\/div>\n<div><code>*\/<\/code><\/div>\n<div><code>var animProp = {<\/code><\/div>\n<div><code>animate: false<\/code><\/div>\n<div><code>};<\/code><\/div>\n<div><code>\/\/ add click listener to canvas<\/code><\/div>\n<div><code>document.getElementById(\"myCanvas\").addEventListener(\"click\", function(){<\/code><\/div>\n<div><code>if (animProp.animate) {<\/code><\/div>\n<div><code>animProp.animate<\/code> <code>= <\/code><code>false<\/code><code>;<\/code><\/div>\n<div><code>}<\/code><\/div>\n<div><code>else {<\/code><\/div>\n<div><code>animProp.animate<\/code> <code>= <\/code><code>true<\/code><code>;<\/code><\/div>\n<div><code>var <\/code><code>date<\/code> <code>= <\/code><code>new<\/code> <code>Date();<\/code><\/div>\n<div><code>var <\/code><code>time<\/code> <code>= <\/code><code>date<\/code><code>.getTime();<\/code><\/div>\n<div><code>animate(time, myRectangle, animProp);<\/code><\/div>\n<div><code>}<\/code><\/div>\n<div><code>});<\/code><\/div>\n<div><code>drawRect(myRectangle);<\/code><\/div>\n<div><code>};<\/code><\/div>\n<div><code>&lt;\/script&gt;<\/code><\/div>\n<div><code>&lt;\/<\/code><code>head<\/code><code>&gt;<\/code><\/div>\n<div><code>&lt;<\/code><code>body<\/code> <code>onmousedown<\/code><code>=<\/code><code>\"return false;\"<\/code><code>&gt;<\/code><\/div>\n<div><code>&lt;<\/code><code>canvas<\/code> <code>id<\/code><code>=<\/code><code>\"myCanvas\"<\/code> <code>width<\/code><code>=<\/code><code>\"578\"<\/code> <code>height<\/code><code>=<\/code><code>\"200\"<\/code><code>&gt;<\/code><\/div>\n<div><code>&lt;\/<\/code><code>canvas<\/code><code>&gt;<\/code><\/div>\n<div><code>&lt;\/<\/code><code>body<\/code><code>&gt;<\/code><\/div>\n<div><code>&lt;\/<\/code><code>html<\/code><code>&gt;<\/code><\/div>\n<\/div>\n<div style=\"text-align: center\"><a href=\"http:\/\/www.arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/08\/ss.jpg\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-5082\" alt=\"\" src=\"http:\/\/www.arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/08\/ss.jpg\" width=\"535\" height=\"271\" srcset=\"https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/08\/ss.jpg 535w, https:\/\/arit.rmutp.ac.th\/kms\/wp-content\/uploads\/2012\/08\/ss-300x151.jpg 300w\" sizes=\"(max-width: 535px) 100vw, 535px\" \/><\/a><\/div>\n<div style=\"text-align: center\">\n<hr \/>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\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-5081","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":"<a href=\"https:\/\/arit.rmutp.ac.th\/kms\/category\/%e0%b8%84%e0%b8%a5%e0%b8%b1%e0%b8%87%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b8%a3%e0%b8%b9%e0%b9%89-%e0%b8%a3%e0%b8%b0%e0%b8%9a%e0%b8%9a%e0%b8%aa%e0%b8%b2%e0%b8%a3%e0%b8%aa\/\" rel=\"category tag\">\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\/5081","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=5081"}],"version-history":[{"count":7,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/posts\/5081\/revisions"}],"predecessor-version":[{"id":5697,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/posts\/5081\/revisions\/5697"}],"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=5081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/categories?post=5081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/tags?post=5081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}