版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lanjian056/article/details/52711310
好久没写博客了，自从换了公司就一直在忙。发现岁数大了，生活和工作的压力都很大。最近做了个项目，需要绘制简单的流程图展示。上网查询了一些实现方式，最终选择了使用Raphaël.js来实现。用了一天时间，搞定项目需求。
做完项目之后，发现Raphaël.js很好玩，于是抽空进一步学习了一下。闲来无事，在网上看到有人用java实现心形函数的绘制。突然想到Raphaël.js，于是就使用它实现了个小例子。一来进一步学习一下Raphaël.js，二来逗逗女朋友。嘿嘿！话不多说了，直接上货。代码很简单，有兴趣的童鞋可以看看。不是什么高深的东西，就是拿出来和大家分享一下。见笑了！！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>love who</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" language="javascript" src="js/raphael.js"></script>
<script type="text/javascript" language="javascript" src="js/font.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" language="javascript">
//创建绘图对象
var raphael;
//初始化x和y
var x = 0, y = 0, r;
var lx1 = 0,ly1 = 0,lx2 = 0,lxy2 = 0;
var vx1 = 0,vy1 = 0,vx2 = 0,vy2 = 0;
var ex1 = 0,ey1 = 0,ex2 = 0,ey2 = 0,ey3 = 0,ey4 = 0;
var charWidth = 20;
var charHeight = 100;
$(function () {
raphael = Raphael("holder", 1388, 786); //绘制画板
});
//绘制L
var count = 0;
function drawL() {
var xStart = 80, yStart = 20;
if(count < charWidth) {
ly1 = yStart;
lx1 = xStart + 3 * count;
for (var j = 0; j < charHeight; j++) {
ly1 = ly1 + 3;
raphael.circle(lx1, ly1, 1).attr({fill:"#33ff00", "stroke-width":0});
}
lx2 = xStart + (charWidth - 1) * 3;
ly2 = yStart + charHeight * 3 - (charWidth - 1) * 3 + 3 * count;
for (var n = 0; n < 50; n++) {
lx2 = lx2 + 3;
raphael.circle(lx2, ly2, 1).attr({fill:"#33ff00", "stroke-width":0});
}
count++;
} else {
window.setInterval(drawHeart, 1);
}
}
//绘制o，利用了一下心形函数
var count2 = 0;
function drawHeart() {
if(count2 < 90) {
for (var j = 0; j < 90; j++) {
r = Math.PI / 45 * count2 * (1 - Math.sin(Math.PI / 45 * j)) * 19;
x = r * Math.cos(Math.PI / 45 * j) * Math.sin(Math.PI / 45 * count2) + 420;
y = -r * Math.sin(Math.PI / 45 * j) + 360 / 4;
raphael.circle(parseInt(x), parseInt(y), 1).attr({fill:"#ff0033", "stroke-width":0});
}
count2++;
} else {
window.setInterval(drawV, 1);
}
}
//绘制V
var count3 = 0;
function drawV() {
var vStartX = 580,vStartY = 70,vStartx2 = 780;
if(count3 < 84) {
vx1 = vStartX + count3 * 1.2; //x平移
vy1 = vStartY + count3 * 3; //打印下一行
for (var i = 0; i < charWidth; i++) {
vx1 = vx1 + 3;
raphael.circle(vx1, vy1, 1).attr({fill:"#ffff00", "stroke-width":0});
}
vx2 = vStartx2 - count3 * 1.2; //x平移
vy2 = vStartY + count3 * 3; //打印下一行
for (var j = 0; j < charWidth; j++) {
vx2 = vx2 + 3;
raphael.circle(vx2, vy2, 1).attr({fill:"#ffff00", "stroke-width":0});
}
count3++;
} else {
window.setInterval(drawE, 1);
}
}
//绘制E
var count4 = 0;
function drawE() {
var eStartX = 910,eStartY = 70;
charHeight = 84;
if(count4 < charWidth) {
ey1 = eStartY;
ex1 = eStartX + 3 * count4;
for (var j = 0; j < charHeight; j++) {
ey1 = ey1 + 3;
raphael.circle(ex1, ey1, 1).attr({fill:"#33ffff", "stroke-width":0});
}
ex2 = eStartX + (charWidth - 1) * 3;
ey2 = eStartY + charHeight * 3 - (charWidth - 1) * 3 + 3 * count4;
ey3 = eStartY + 3 * (count4 + 1);
ey4 = eStartY + charHeight * 3 - (charWidth - 1) * 3 * 2.6 + 3 * count4;
for (var n = 0; n < 50; n++) {
ex2 = ex2 + 3;
raphael.circle(ex2, ey2, 1).attr({fill:"#33ffff", "stroke-width":0});
raphael.circle(ex2, ey3, 1).attr({fill:"#33ffff", "stroke-width":0});
if(n < 35) {
raphael.circle(ex2, ey4, 1).attr({fill:"#33ffff", "stroke-width":0});
}
}
count4++;
} else {
}
}
//展示LOVE函数
function showLove() {
var who = $("#who").val();
raphael.print(400, 450, who, raphael.getFont("whoa"), 200).attr({fill:"#ff33ff"});
window.setInterval(drawL, 1);
}
</script>
</head>
<body style="background: #000;">
<span style="font-family: '微软雅黑';color: #fff;">请输入你的英文名字：</span><input type="text" id="who" name="who" value=""/> <input type="button" onclick="showLove()" value="提交"/>
<div id="holder" style="width: 100%;height: 786px;"></div>
</body>
</html>
实现效果如下：
PS：中文API路径：http://lab.julying.com/raphael-js/docs/
奉上项目源码。最好使用火狐或者谷歌浏览器打开，ie效果不好。
- surprise.zip (74.3 KB)
- 下载次数: 2