{"id":5073,"date":"2012-03-28T09:32:01","date_gmt":"2012-03-28T02:32:01","guid":{"rendered":"http:\/\/www.arit.rmutp.ac.th\/kms\/?p=5073"},"modified":"2013-09-20T15:44:27","modified_gmt":"2013-09-20T08:44:27","slug":"circle-translation-with-html5","status":"publish","type":"post","link":"https:\/\/arit.rmutp.ac.th\/kms\/circle-translation-with-html5\/","title":{"rendered":"Circle Translation with 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

<head> \u00a0\u00a0 <title>SVG Animation \u2013 Circle Translation<\/title>
\n<script> \u00a0var timer;\u00a0 \u00a0 var delay = 16;
\nfunction s2d(s)
\n{ \u00a0return (s \/ 1000) * delay; \u00a0 }<\/p>\n

function init()
\n{ \u00a0 svgElement = document.getElementById(\u201csvgElement\u201d);
\ncircle0 = document.getElementById(\u201ccircle0\u2033);
\ntimer = setInterval(doAnim, delay);
\ncircle0.vx = 150;\u00a0\u00a0 \u00a0 \u00a0 circle0.vy = 80;\u00a0 \u00a0 }
\nfunction doAnim()
\n{ \u00a0 \u00a0 \u00a0\u00a0 \u00a0 \u00a0 var r = circle0.r.baseVal.value;
\nvar boxWidth = svgElement.width.baseVal.value;
\nvar boxHeight = svgElement.height.baseVal.value;
\ncircle0.cx.baseVal.value += s2d(circle0.vx);
\ncircle0.cy.baseVal.value += s2d(circle0.vy);
\nif (circle0.cx.baseVal.value >= (boxWidth \u2013 r))
\ncircle0.vx *=-1;
\nif (circle0.cy.baseVal.value >= (boxHeight \u2013 r))
\ncircle0.vY *=-1;
\n\/\/clearInterval(timer);
\n}
\n<\/script>
\n<\/head>
\n<body onload=\u201dinit();\u201d>
\n<svg id=\u201dsvgElement\u201d width=\u201d800px\u201d height=\u201d600px\u201d viewBox=\u201d0 0 800 600\u2033>
\n<rect x=\u201d0\u2033 y=\u201d0\u2033 width=\u201d100%\u201d height=\u201d100%\u201d rx=\u201d10\u2033 ry=\u201d10\u2033 style=\u201dfill: white; stroke: black;\u201d \/>
\n<circle id=\u201dcircle0\u2033 cx=\u201d40\u2033 cy=\u201d40\u2033 r=\u201d40\u2033 style=\u201dfill: orange; stroke: black; stroke-width: 1;\u201d \/>
\n<\/svg>
\n<\/body>
\n<\/html><\/p>\n

\u0e25\u0e39\u0e01\u0e1a\u0e2d\u0e25\u0e0a\u0e19\u0e02\u0e49\u0e32\u0e07\u0e41\u0e25\u0e49\u0e27\u0e08\u0e30\u0e40\u0e14\u0e49\u0e07\u0e01\u0e25\u0e31\u0e1a<\/p>\n

\n

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

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

\n

\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-5073","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\/5073","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=5073"}],"version-history":[{"count":6,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/posts\/5073\/revisions"}],"predecessor-version":[{"id":5698,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/posts\/5073\/revisions\/5698"}],"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=5073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/categories?post=5073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arit.rmutp.ac.th\/kms\/wp-json\/wp\/v2\/tags?post=5073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}