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

2019-11-20 10:37:53

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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,"/65f6/5c1a/4e2d/9ed1/7b80/4f53","/5b8b/4f53";}.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程序设计有所帮助。

上一篇：JavaScript File API文件上传预览

下一篇：Webwork 实现文件上传下载代码详解