javascript绘制漂亮的心型线效果完整实例

本文实例讲述了javascript绘制漂亮的心型线效果实现方法。分享给大家供大家参考，具体如下：
运行效果截图如下：

具体代码如下：

<！DOCTYPE HTML><html><head><meta charset="utf-8"><title>JS心型线</title><style>div{position:absolute;}.xx-box{left:50%;top:50%;margin-left:-250px;margin-top:-250px;width:500px;height:500px;background-color:#000;}.xx-box .text{top:30%;height:48px;line-height:48px;color:#f00;text-shadow: 3px 3px 4px #f00;font-size:36px;font-weight:bold;width:100%;text-align:center;font-family:Tangerine,Tahoma,Arial,"65f65c1a4e2d9ed17b804f53","5b8b4f53";}.xx-box .item{width:2px;height:20px;overflow:hidden;}</style></head><body><div class="xx-box" id="xx-box"><div class="text">I Love You</div></div><script>function createPoint（x,y,c）{var div = document.createElement（"div"）;div.className = "item";div.style.left = x + "px";div.style.top = y + "px";div.style.backgroundColor = c;document.getElementById（"xx-box"）.appendChild（div）;}function heartShape（r,dx,dy,c）{//r:大小;dx:水平偏移;dy:垂直偏移;c:颜色var m,n,x,y,i;for（i = 0; i <= 200; i += 0.04）{m = i;n = -r * （（（Math.sin（i） * Math.sqrt（Math.abs（Math.cos（i）））） / （Math.sin（i） + 1.4）） - 2 * Math.sin（i） + 2）;x = n * Math.cos（m） + dx;y = n * Math.sin（m） + dy;createPoint（x,y,c）;}}heartShape（80,250,100,"#f00"）;</script></body></html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》、《javascript面向对象入门教程》及《JavaScript数据结构与算法技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。