使用Raphaël.js實現心形函式
阿新 • • 發佈：2018-12-24
好久沒寫部落格了，自從換了公司就一直在忙。發現歲數大了，生活和工作的壓力都很大。最近做了個專案，需要繪製簡單的流程圖展示。上網查詢了一些實現方式，最終選擇了使用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>
實現效果如下：
