使用Raphaël.js实现心形函数

来源：互联网发布：历史气温数据下载编辑：程序博客网时间：2024/05/14 13:22

好久没写博客了，自从换了公司就一直在忙。发现岁数大了，生活和工作的压力都很大。最近做了个项目，需要绘制简单的流程图展示。上网查询了一些实现方式，最终选择了使用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

查看图片附件

0 0