Raphaël 简单Demo

来源：互联网发布：软件系统详细设计方案编辑：程序博客网时间：2024/05/21 17:50

使用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();