Raphaël 簡單Demo

使用Raphael可以畫出不同的強大的圖案，並有可以編寫滑鼠觸發事件
下列就是的javaScript，點擊下面的黑色圓圈，可是使上面2個白色的圓圈消失。
註：請到ttp://raphaeljs.com上下載js檔案
var paper1 = Raphael(1, 1, 400, 400);

var circle = paper1.circle(150, 140, 110);

var rect = paper1.rect(100, 100, 100, 70, 10);

var circle2 = paper1.circle(120, 125, 10);

var circle3 = paper1.circle(140, 150, 10);

rect.attr("fill","#000");

circle.attr("fill", "#f33");

circle2.attr("fill", "#fff");

circle3.attr("fill", "#fff");

circle.attr("stroke", "#fff");

circle.attr("stroke","#f33");

circle2.attr("stroke", "#fff");

circle3.attr("stroke", "#fff");

var paper = Raphael(1, 400, 400, 800);
// Creates circle at x = 50, y = 40, with radius 10
var circle4 = paper.circle(100, 100, 10);
// Sets the fill attribute of the circle to red (#f00)
circle4.attr("fill", "#000");

circle4.node.onclick = function () { rect.toFront(); };

var st = paper1.set();
st.push(paper1.circle(10, 10, 5));
st.push(paper1.circle(30, 10, 5));
st.attr({fill: "red"});
var t = paper.text(100, 50, "Look mom, I'm scalable!");
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(500, 600); // draw a diagonal line
var c = paper.path({stroke: "#036"}, "M 10 10 L 50 50"); // same

var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 70,90);
var c = paper1.path({stroke: "#036"}).moveTo(100, 50).andClose();