Year: 2012

รูปภาพหลากหลาย HTML

click หยุด click เดิน HTML5

วิ่งเดินหน้าถอยหลัง HTML5

<!DOCTYPE HTML> <html> <head> <style> body {                margin: 0px;                padding: 0px;            } #myCanvas {                border: 1px solid #9C9898;            } </style> <script> window.requestAnimFrame = (function(callback) […]

เคลื่อนไหวแบบลบและวาดใหม่อย่างรวดเร็ว

<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style> <script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); };            })(); function animate(lastTime, myRectangle) { var canvas […]

วาดสี่เหลี่ยมมีเงา 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.rect(188, 44, 200, 100); context.fillStyle =”#8ED6FF”; context.shadowColor = “#bbbbbb”; context.shadowBlur = 20; context.shadowOffsetX = 15; context.shadowOffsetY = 15; context.fill(); }; </script> </head> […]

Crop Image 5

<!doctype html> <html> <head> <title>Image Crop HTML5 (ProgImage2.htm)</title> <script> window.onload = function() { var canvas = document.getElementById(“myCanvas”); var context = canvas.getContext(“2d”); var imageObj = new Image(); imageObj.onload = function() { // draw cropped image var sourceX = 150; var sourceY = 0; var sourceWidth = 150; var sourceHeight = 150; var destWidth = sourceWidth; var […]

เขียนข้อความ TEXT with 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”); var x = 150; var y = 100; context.font = “40pt Calibri”; context.fillText(“Hello World!”, x, y); }; </script> </head> <body onmousedown=”return false;”> <canvas […]

วาดรูปซ้อนกัน 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”> […]