Vector-Based JavaScript

July 3, 2009 § Leave a comment

Raphaël is a JavaScript library that simplify your vector graphics.

It uses SVG W3C and VML standard to create graphics. Each graphical object you carete is a DOM object that you can attach JavaScript event handlers or modify them later.

The advantages are to make drawing vector art compatible cross-browser. It supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");
Advertisements

JavaScript Animation Framework Run

June 22, 2009 § Leave a comment

It’s the first time to discover a JavaScript animation framework Run. It supports Firefox 1+, Opera 8+, IE 5.5+, Safari 2+, Konqueror.

I include the code to demonstrate the concept. I couldn’t get it to run the examples on Mac FireFox. However, the idea behind JavaScript Animation Framework is so cool that I would like to blog about it.

1 <head>
2     <script type=”text/javascript” src=”prototype.js”></script>
3     <script type=”text/javascript” src=”prototype_extended.js”></script>
4     <script type=”text/javascript” src=”run.js”></script>
5 </head>

1 <body>
2
3     <div id=”myDiv” onclick=”action()”>Click on me to test!</div>
4
5     <script type=”text/javascript”>
6     //<![CDATA[
7         action = function() {
8             myRun = new Run({
9                 elements: ‘myDiv’,
10                 style: {color:’yellow’, fontSize:’50px’},
11                 flow: Run.SINUS,
12                 onend: function() {
13                     document.title += ‘ .. Demo finished’;
14                 }
15             });
16         };
17     //]]>
18     </script>
19
20 </body>
21 </html>

Where Am I?

You are currently browsing the JavaScript category at Web Builders.