快捷導(dǎo)航

javascript繪制漂亮的心型線效果完整實(shí)例

更新時(shí)間：2016年02月02日 11:50:16 作者：皮蛋

這篇文章主要介紹了javascript繪制漂亮的心型線效果實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了JavaScript圖形繪制的具體步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript繪制漂亮的心型線效果實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

運(yùn)行效果截圖如下：

具體代碼如下：

<!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>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《javascript面向?qū)ο笕腴T教程》及《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript獲得服務(wù)器端控件的ID的實(shí)現(xiàn)代碼
javascript獲得服務(wù)器端控件的ID的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-12-12
微信小程序通過(guò)點(diǎn)擊事件傳參(data-)的操作示例
微信小程序可以通過(guò)直接寫(xiě) data-index="1" 進(jìn)行數(shù)據(jù)的綁定 ,利用 bindtap 點(diǎn)擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息,本文給大家介紹微信小程序通過(guò)點(diǎn)擊事件傳參(data-)的操作,感興趣的朋友一起看看吧
2023-12-12
基于zepto.js實(shí)現(xiàn)登錄界面
這篇文章主要為大家詳細(xì)介紹了使用zepto.js，純JS寫(xiě)的登錄界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
JavaScript中的函數(shù)重載深入理解
將函數(shù)名作為指向函數(shù)的指針，有助于理解為什么ECMAScript中沒(méi)有函數(shù)重載的概念,需要的朋友可以參考下
2014-08-08
微信小程序之間的參數(shù)傳遞、獲取的操作方法
這篇文章主要介紹了微信小程序中如何獲取和傳遞參數(shù),包括獲取當(dāng)前頁(yè)面參數(shù)、單獨(dú)input文本框參數(shù)的獲取、表單獲取參數(shù)信息、點(diǎn)擊表格單元格信息獲取行ID以及前端頁(yè)面跳轉(zhuǎn)傳遞多個(gè)參數(shù)等,感興趣的朋友跟隨小編一起看看吧
2025-01-01
JavaScript中return用法示例
這篇文章主要介紹了JavaScript中return用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了javascript中return語(yǔ)句的功能與使用技巧,需要的朋友可以參考下
2016-11-11
15個(gè)高級(jí)前端開(kāi)發(fā)小技巧總結(jié)分享
這篇文章主要介紹了15種不依賴JavaScript的高級(jí)Web開(kāi)發(fā)技術(shù),涵蓋了從響應(yīng)式排版到圖像延遲加載的各個(gè)方面,展示了現(xiàn)代HTML和CSS的強(qiáng)大功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-11-11
微信小程序發(fā)布新版本時(shí)自動(dòng)提示用戶更新的方法
這篇文章主要介紹了微信小程序發(fā)布新版本時(shí)自動(dòng)提示用戶更新的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
小程序多文件上傳 Tdesign的過(guò)程
眾所周知,小程序文件上傳還是有點(diǎn)麻煩的,其實(shí)主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說(shuō),文件不能批量提交,只能一個(gè)個(gè)的提交,小程序的上傳需要專門的接口,現(xiàn)在給大家分享小程序多文件上傳 Tdesign的方法,感興趣的朋友一起看看吧
2023-11-11
JavaScript實(shí)現(xiàn)生成GUID（全局統(tǒng)一標(biāo)識(shí)符）
這篇文章主要介紹了JavaScript實(shí)現(xiàn)生成GUID（全局統(tǒng)一標(biāo)識(shí)符）,本文寫(xiě)成了一個(gè)GUID生成類,使用也非常方便,需要的朋友可以參考下
2014-09-09