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 可以拖动的DIV(二)
Jun 26 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP基本语法总结
2014/09/06 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP7 新增功能
2021/03/09 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js图片处理示例代码
2014/05/12 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
JS作用域深度解析
2016/12/29 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
西部世纪面试题
2014/12/05 面试题
应聘美工求职信
2013/11/07 职场文书
自我评价范文点评
2013/12/04 职场文书
消防安全汇报材料
2014/02/08 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
会计求职信范文
2014/05/24 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
vue3不同环境下实现配置代理
2022/05/25 Vue.js