Get Adobe Flash player

Monthly Archives: March 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)
{
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
function animate(myRectangle)
{
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);                                // update
var date = new Date();
var time = date.getTime();
var amplitude = 150;
var period = 2000; // in ms
var centerX = canvas.width / 2 – myRectangle.width / 2;
var nextX = amplitude * Math.sin(time * 2 * Math.PI / period) + centerX;
myRectangle.x = nextX;                                // clear
context.clearRect(0, 0, canvas.width, canvas.height);                                // draw
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = “#8ED6FF”;
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = “black”;
context.stroke();                                // request new frame
requestAnimFrame(function()
{
animate(myRectangle);                });
}

window.onload = function()
{
var myRectangle =
{
x: 250,                    y: 70,                    width: 100,                    height: 50,                    borderWidth: 5
};
animate(myRectangle);
};
</script>
</head>
<body onmousedown=”return false;”>
<canvas id=”myCanvas” width=”578″ height=”200″>
</canvas>
</body>
</html>

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

<!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 = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);                                // update
var date = new Date();
var time = date.getTime();
var timeDiff = time – lastTime;
var linearSpeed = 100; // pixels / second
var linearDistEachFrame = linearSpeed * timeDiff / 1000;
var currentX = myRectangle.x;
if (currentX < canvas.width – myRectangle.width – myRectangle.borderWidth / 2)
{
var newX = currentX + linearDistEachFrame;
myRectangle.x = newX;
}
lastTime = time;                                // clear
context.clearRect(0, 0, canvas.width, canvas.height);        // draw
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = “#8ED6FF”;
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = “black”;
context.stroke();                                // request new frame
requestAnimFrame(function(){   animate(lastTime, myRectangle);     });
}
window.onload = function()
{
var myRectangle = {     x: 0,     y: 50,     width: 100,     height: 50,   borderWidth: 5   };
var date = new Date();
var time = date.getTime();
animate(time, myRectangle);
};
</script>
</head>
<body onmousedown=”return false;”>
<canvas id=”myCanvas” width=”578″ height=”200″>
</canvas>
</body>
</html>

 

วาดสี่เหลี่ยมมีเงา 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>
<body>
<canvas id=”myCanvas” width=”578″ height=”200″>
</canvas>
</body>
</html>

 

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 destHeight = sourceHeight;
var destX = canvas.width / 2 – destWidth / 2;
var destY = canvas.height / 2 – destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight);
};
imageObj.src = “image1.gif”;};
</script>
</head>
<body>
<canvas id=”myCanvas” width=”578″ height=”200″>
</canvas>
</body>
</html>

เขียนข้อความ 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 id=”myCanvas” width=”578″ height=”200″>
</canvas>
</body>
</html>

 

วาดรูปซ้อนกัน 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 =”red”; context.fill();
};
</script>
</head>
<body>
<canvas id=”myCanvas” width=”578″ height=”200″>
</canvas>
</body>
</html>

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>
</html>

พระจันทร์สีเหลืองจะหมุนรอบโลกสีฟ้าเป็นวงรี

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”>
<rect x=”5″ y=”250″ width=”100″ height=”100″ style=”fill:orange”></rect>
</svg></body></html>

เมื่อเอา mouse click ที่สีเหลืองสีจะเปลี่ยนเป็นสีแดง

เมื่อเอา mouse click ที่ตัวอักษร Test Mouse Over จะมีขนาดใหญ่ขึ้น

เมื่อเอา mouse click ที่สีส้มจะ link ไปที่ www.google.com