Category: การจัดการความรู้ KM

วาดรูปซ้อนกัน HTML5

<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style> <script> window.onload = function() { var canvas = document.getElementById(“myCanvas”); var context = canvas.getContext(“2d”); context.beginPath(); context.rect(200, 20, 100, 100); context.fillStyle = “blue”; context.fill(); context.globalAlpha = 0.5; context.beginPath(); context.arc(320, 120, 60, 0, 2 * Math.PI, false); context.fillStyle […]

Moon move around the Earth

<!doctype html> <html> <head><title>Moon move around the Sun HTML5 index35</title></head> <body> <svg> <g id=’Earth’ transform=’translate(200,200)’> <circle cx=’347′ cy=’87’ r=’10’ fill=’blue’ /> <path id=’orbitMoon’ d=’M370,79 a30,17 0 1,0 1,1 z’  fill=’none’ stroke=’gray’ stroke-width=’1′ /> <circle cx=’0′ cy=’0′ r=’5′ fill=’yellow’ stroke=’black’ stroke-width=’1′ > <animateMotion dur=’2.8s’ fill=’freeze’ repeatCount=’indefinite’ > <mpath xlink:href=’#orbitMoon’ /> </animateMotion > </circle> </g> </svg> </body> […]

On Mouse Over HTML5

<!doctype html> <html><head><title>test Mouse Over HTML5 index34</title></head> <body> <svg width=”500″ height=”500″> <rect x=”5″ y=”5″ width=”100″ height=”100″ style=”fill:yellow”> <set attributeName=”fill” from=”yellow” to=”red” begin=”mouseover” end=”mouseout” /> </rect> <text x=”150″ y=”150″ font-size=”12″ fill=”blue”>Test Mouse Over <set attributeName=”font-size”  from=”10″ to=”50″ begin=”mouseover” end=”mouseout” /> </text> <rect x=”5″ y=”100″ width=”100″ height=”100″ style=”fill:green”> <animate attributeName=”opacity” from=”1″ to=”0″begin=”accesskey(1)” dur=”3s” fill=”restore”/> </rect> <a xlink:href=”www.google.com”> […]

Circle Translation with HTML5

<head>    <title>SVG Animation – Circle Translation</title> <script>  var timer;    var delay = 16; function s2d(s) {  return (s / 1000) * delay;   } function init() {   svgElement = document.getElementById(“svgElement”); circle0 = document.getElementById(“circle0″); timer = setInterval(doAnim, delay); circle0.vx = 150;       circle0.vy = 80;    } function doAnim() {     […]

Small picture down in HTML5

<!doctype html> <html> <head><title>Basic Animation HTML5 index31</title></head> <body> <svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”> <circle cx=”200″ cy=”200″ r=”60″ fill=”red”> <set attributeName=”r” to=”10″ begin=”3s” dur=”5s” /> </circle> </svg> </body> </html>

Expand border moving with HTML5

<!doctype html> <html><head><title>Basic Animation Moving Down HTML5 Index30</title></head> <body> <svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”> <rect x=”50″ y=”50″ height=”110″ width=”110″ style=”stroke:#ff0000; fill:#ccccff”> <animate attributeName=”y” from=”50″ to=”150″ begin=”0″ dur=”5s” /> <animate attributeType=”CSS” attributeName=”stroke-width” from=”1″ to=”25″ begin=”0″ dur=”5s” /> </rect> </svg> </body> </html>

Moving down with HTML5

<!doctype html> <html> <head><title>Basic Animation Moving Down HTML5 Index29</title></head> <body> <svg xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”> <rect x=”50″ y=”50″ height=”110″ width=”110″ style=”stroke:#ff0000; fill:#ccccff”> <animate attributeName=”y” from=”50″ to=”150″ begin=”0″ dur=”5s” /> </rect> </svg> </body> </html>  

เปลี่ยนสี ด้วย HTML5

<!doctype html><html><head><title>Basic Animation Color HTML5 Index28</title></head><body><svg xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”> <rect x=”300″ y=”300″ height=”110″ width=”110″ style=”stroke:#ff0000; fill:#ccccff”><animateColor attributeName=”fill” from=”rgb(100%,0%,0%)” to=”orange” begin=”0″ dur=”5s”</rect> </svg></body></html>

การ Transform ตัวอักษร ด้วย HTML5

<!doctype html> <html> <head><title>Transform Graphics HTML5</title></head> <body> <svg xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”><defs> <rect x=”50″ y=”50″ height=”110″ width=”110″ style=”stroke:#ff0000; fill:#ccccff”transform=”translate(30) rotate(45 50 50) scale(2 2)”> </rect> </defs> <text x =”70″ y=”100″ transform=”translate(30) rotate(45 50 50) scale(2 2) “>Hello World</text> </svg> </body> </html>  

เมื่อกดคลิกที่ภาพแล้วภาพเล็กลง ด้วย HTML5

<!doctype html> <html> <head><title>test HTML5</title></head> <body> <svg xmlns=”http://www.w3.org/2000/svg”> <script type=”text/javascript”> function shrink() {var img1=document.getElementById(“image1”); var x=parseInt(img1.getAttribute(“width”)); x-=5;img1.setAttribute(“width”,x);} </script> <image id=”image1″ x=”20″ y=”20″ width=”200″ height=”200″xlink:href= “image1.gif” onclick=”shrink()” /> </svg></body></html> วิธีทำต้อง Load รูปไปไว้ใน inetpub\wwwroot ก่อน After click on the picture…picture get smaller and smaller