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


Posted in Javascript onFebruary 02, 2016

本文实例讲述了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,"\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 Eval 函数使用
Mar 23 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 #Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 #Javascript
原生js实现图片层叠轮播切换效果
Feb 02 #Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 #Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 #Javascript
javascript实现瀑布流加载图片原理
Feb 02 #Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 #Javascript
You might like
php发送post请求的三种方法
2014/02/11 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
vscode 远程调试python的方法
2017/12/01 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
通过python爬虫赚钱的方法
2019/01/29 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
python实现批量命名照片
2020/06/18 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
生物化工工艺专业应届生求职信
2013/10/08 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
秋季运动会广播稿
2014/02/22 职场文书
效能监察建议书
2014/05/19 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
队名及霸气口号大全
2015/12/25 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
SpringBoot详解执行过程
2022/07/15 Java/Android