我刚刚发现了Raphael,并且很喜欢它,但是我不太会JavaScript。现在我有三个重复的代码部分,用于在三个不同的div中绘制同一个圆形。在Raphael中,默认情况下通过ID查找元素来创建画布,但我想使用一组变量在所有class为“circle”的div中绘制圆形。我认为有更高效的编码方式。这是我现在正在使用的代码:
window.onload = function () {
var paper = Raphael("c1", 26, 26); /* Make canvas 26*26px in div id "c1" */
var circle = paper.circle(13, 13, 10.5); /* Draw circle at the center of the canvas with radius 10.5 */
circle.attr("stroke", "#f1f1f1");
circle.attr("stroke-width", 2);
var text = paper.text(13, 13, "1"); /* Print text "1" inside the circle */
text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
text.attr("fill", "#f1f1f1");
var paper2 = Raphael("c2", 26, 26);
var circle2 = paper2.circle(13, 13, 10.5);
circle2.attr("stroke", "#f1f1f1");
circle2.attr("stroke-width", 2);
var text2 = paper2.text(12, 13, "2");
text2.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
text2.attr("fill", "#f1f1f1");
var paper3 = Raphael("c3", 26, 26);
var circle3 = paper3.circle(13, 13, 10.5);
circle3.attr("stroke", "#f1f1f1");
circle3.attr("stroke-width", 2);
var text3 = paper3.text(12, 13, "3");
text3.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
text3.attr("fill", "#f1f1f1");
};
测试网站位于http://jesserosenfield.com/fluid/test.html
非常感谢您的帮助!