Sunday, February 26, 2012, 12:18 AM ( 22672 views )  - Posted by Administrator
Maybe you've already played with the SVG tags.
Easy ... <svg> <rect id="rct" x="100" y="100" width="100" height="100"/> </svg>
Easy for a first try.
Then, we want to modify or get the value of X and there! a strange object appeared ...SVGAnimatedLength
At this point you can get the value of X this way
document.getElementById("rct").baseVal.value
the baseVal will give you a SVGLength
But change its value is even easier
document.getElementById("rct").setAttribute("x", 150);
Here a example http://celermajer.net/javascriptTest/SV ... ength.html :

Let's move this black square now !




<svg>
<rect id="rct1" x="55" y="25" width="150" height="150" style="fill:rgb(100,100,100)"/>
<rect id="rct2" x="45" y="15" width="150" height="150" style="fill:rgb(0,0,0)" />

</svg>



<script type="text/javascript">
var rct2x =-99;
var rct2y =-99;
$("#rct2").mousedown(rct1mousedown);
window.onmouseup = function (event) {rct1mouseup(event);} ;
function SVGAnimatLengthVal(o) {
oo = o.baseVal.value;
return oo;
}
window.onmousemove = function (event) {
if (rct2x==-98) {
rct2x = event.screenX;
rct2y = event.screenY;
}
if (rct2x!=-99) {
rct = document.getElementById("rct2");

var x = SVGAnimatLengthVal(document.getElementById("rct2").x) + event.screenX -rct2x ;
var y = SVGAnimatLengthVal(document.getElementById("rct2").y)+ event.screenY -rct2y ;
rct.setAttribute("x", x);
rct.setAttribute("y", y);
rct2x = event.screenX;
rct2y = event.screenY;
}
};
function rct1mouseup(event) {
$("#rct2").css("fill", "rgb(0,0,0)");
rct2x =-99;
}
function rct1mousedown(event) {
$("#rct2").css("fill", "rgb(0,0,255)");
rct2x = -98;
}

</script>

Sunday, February 5, 2012, 01:32 AM ( 2024 views )  - Posted by Administrator
With the canvas Object of HTML 5 you can do a lot thing.
Here a Tetris example download it the sources codes is your !



Thursday, January 1, 1970, 01:00 AM ( 2013 views )


Monday, January 30, 2012, 12:34 PM ( 1863 views )  - Posted by Administrator
Here a Tetris in Java Click here
All the sources codes are in the jar file(open it like a zip file).
I am working on a nice tetris in javascript HTML5 an the canvas tag ... for soon

Monday, January 30, 2012, 04:25 AM ( 1756 views )  - Posted by Administrator
This is a small example of a canvas animation
Canvas in HTML 5 is a powerfull tool. A lot of coders think it will replace Adobe Flash ... We don't know but it is certainly the wish of Apple.Here you will find a very simple example of its use. You can download all the code here
first add a canvas in your html.
id="myctx" width="512" height="512"
             style=" background-color: black;border:1px solid #c3c3c3;">

        var myctx = document.getElementById("myctx");

        var ctx = myctx.getContext('2d');

Canvas object has the property "getContext ('2 d ');" which you can draw.
    
intID=setInterval("Paint()",intervalTime);
The event setInterval is the easiest way to make annimations.





<Back | 1 | 2 |