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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
jquery 插件学习(六)
Aug 06 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 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
Laravel关系模型指定条件查询方法
2019/10/10 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
Vue基础配置讲解
2019/11/29 Javascript
Python的Flask框架与数据库连接的教程
2015/04/20 Python
使用Python设计一个代码统计工具
2018/04/04 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python实现飞机大战小游戏
2019/11/08 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
高中生期末评语大全
2014/01/28 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
销售内勤岗位职责
2014/04/15 职场文书
签约仪式策划方案
2014/06/02 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
陕西导游词
2015/02/04 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
MySQL 开窗函数
2022/02/15 MySQL
SQL Server Agent 服务无法启动
2022/04/20 SQL Server