🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步