suchen

Heim  >  Artikel  >  Web-Frontend  >  Vollständiges Beispiel für das Zeichnen wunderschöner herzförmiger Linien mit Javascript. Javascript-Fähigkeiten

Vollständiges Beispiel für das Zeichnen wunderschöner herzförmiger Linien mit Javascript. Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:16:251371Durchsuche

本文实例讲述了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程序设计有所帮助。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：AngularJS lädt Dateien in den Backend-ASP.NET-API-Controller_AngularJS hochNächster Artikel：AngularJS lädt Dateien in den Backend-ASP.NET-API-Controller_AngularJS hoch

In Verbindung stehende Artikel

Mehr sehen