Get Adobe Flash player

Monthly Archives: March 2012

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()
{            var r = circle0.r.baseVal.value;
var boxWidth = svgElement.width.baseVal.value;
var boxHeight = svgElement.height.baseVal.value;
circle0.cx.baseVal.value += s2d(circle0.vx);
circle0.cy.baseVal.value += s2d(circle0.vy);
if (circle0.cx.baseVal.value >= (boxWidth – r))
circle0.vx *=-1;
if (circle0.cy.baseVal.value >= (boxHeight – r))
circle0.vY *=-1;
//clearInterval(timer);
}
</script>
</head>
<body onload=”init();”>
<svg id=”svgElement” width=”800px” height=”600px” viewBox=”0 0 800 600″>
<rect x=”0″ y=”0″ width=”100%” height=”100%” rx=”10″ ry=”10″ style=”fill: white; stroke: black;” />
<circle id=”circle0″ cx=”40″ cy=”40″ r=”40″ style=”fill: orange; stroke: black; stroke-width: 1;” />
</svg>
</body>
</html>

ลูกบอลชนข้างแล้วจะเด้งกลับ

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

การเอารูปภาพมาวางบน web ด้วย HTML5

<!doctype html>
<html><head><title>test HTML5</title></head>
<body>
<svg id=”svgelem” height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<defs>
<radialGradient id =”gradient” cx=”50%” cy=”50%” r=”50%” fx=”50%” fy=”50%”>
<stop offset=”0%” style=”stop-color:rgb(200,200,200); stop-opacity:0″/>
<stop offset=”100%” style=”stop-color:rgb(0,0,255); stop-opacity:1″/></radialGradient>
</defs>
<image xlink:href= “13.gif” x=”10″ y=”10″ width=”200″ height=”200″/>
</svg>
</body>
</html>

วิธีทำต้อง load รูปภาพไปไว้ใน Inetpub\wwwroot ก่อน

และเมื่อกด CTRL+ หรือ CTRL- จะสามารถขยายหรือลดขนาดรูปได้โดยภาพไม่แตก

การวาดวงรีสีเหลือบ ด้วย HTML5

<!doctype html>
<html>
<head><title>Gradient HTML5</title></head>
<body>
<svg id=”svgelem” height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<defs>
<radialGradient id =”gradient” cx=”50%” cy=”50%” r=”50%” fx=”50%” fy=”50%”>
<stop offset=”0%” style=”stop-color:rgb(200,200,200); stop-opacity:0″/>
<stop offset=”100%” style=”stop-color:rgb(0,0,255); stop-opacity:1″/></radialGradient>
</defs>
<ellipse cx=”200″ cy=”100″ rx=”200″ ry=”100″ style=”fill:url(#gradient)”/>
</svg>
</body>
</html>

เมื่อกด Ctrl+/Ctrl- จะเพิ่มขนาดหรือขยายภาพที่วาดไว้ได้ด้วยภาพไม่แตก

การวาดวงกลมและตัวอักษร

<!doctype html>
<html>
<head><title>test HTML5</title></head>
<body>
<svg smlns=”http://www.w3.org/2000/” width=”300″ height =”300″>
<text style=”font-size:30; stroke:red” x=”10″ y=”170″>Hello SVG World </text><circle id=”redcircle” cx=”250″ cy=”250″ r=”50″ fill=”green” /></svg></body></html>