JS 绘制心形线

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>JS心型线</title>

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">

<style>

div{

position:absolute;

}

.xx-box{

left:50%;

top:0;

margin-left:-250px;

width:500px;

height:500px;

}

.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:20px;

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 += 1){

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(120,250,100,"#f00");

</script>

</body>

</html>

　　

JS 绘制心形线的更多相关文章

  1. matlab绘制心形函数

    matlab 7.0 绘制二维.三维心形函数       又到周六,下周就要迎来春节小长假了,想想都有些激动.在外漂了一整年,总于可以回家和父母团聚了,还有吃好吃的...,哎呀~想想都流口水呢.不过先 ...

  2. 利用d3.js绘制雷达图

    利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...

  3. 应用wavesurfer.js绘制音频波形图小白极速上手总结

    一.简介 1.1  引   人生中第一份工作公司有语音识别业务,需要做一个web网页来整合语音引擎的标注结果和错误率等参数,并提供人工比对的语音标注功能(功能类似于TranscriberAG等),(博 ...

  4. js 绘制数学函数

    <!-- <!doctype html> --> <html lang="en"> <head> <meta charset= ...

  5. ichart.js绘制虚线 ，平均分虚线

    var Data=new Array(); Data[0] = { labels : ["第一单元","第二单元","第三单元"," ...

  6. Javascript实战开发：教你使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

  7. d3.js 绘制极坐标图(polar plot)

    0.引言 在极坐标系中,任意位置可由一个夹角和一段相对原点(极点)的距离表示.也就是说,我们可以用 (angle,r) 来表示极坐标系中的点. 1.数据 假设我们有如下数据集[ [10, 0.2], ...

  8. [js]d3.js绘制拓扑树

    echart也支持拓扑树了 所需的json数据格式: children嵌套 vis.js也支持绘制拓扑树 数据格式: nodes: {id, label, title} edges: {from, t ...

  9. JS绘制拓扑图示例 （JTopo）

    目前在做的项目是渔政的监控,需要用到的设备包括雷达,光电,站点信息等,想要更直观的展现设备之间的连接关系和状态信息,这时候需要画一张拓扑图 在做拓扑图之前,首先要学习一下,html里面另一个比较常用的 ...

随机推荐

  1. iOS开发 - 多线程实现方案之NSThread篇

    NSThread API //类方法:创建一个线程 + (void)detachNewThreadWithBlock:(void (^)(void))block API_AVAILABLE(macos ...

  2. MFC中的模态对话框与非模态对话框

    模态对话框创建: MyDialog mydlg; mydlg.DoModal() 当前只能运行此模态对话框,且停止主窗口的运行,直到模态对话框退出,才允许主窗口运行. 模态对话框的关闭顺序: OnCl ...

  3. 20180401 lambda表达式

    ##lambda表达式:替代简单函数用 (反而增加了代码阅读难度,不建议使用) def fg(a1,a2): return a1+a2 qq = lambda a1,a2 : a1+a2 a1 = 1 ...

  4. RS485的自动发送与布线

    布线http://blog.sina.com.cn/s/blog_729a492301019owo.html 自动收发电路:485注意控制端电平问题(3.3/5V)

  5. JavaScript Allongé 序幕：值和表达式

    序幕:值和表达式   下面的内容非常基础,然而,就像大多数的故事一样,在最初的时候开始才是最好的开端. 想象一下,我们要去最喜欢的咖啡馆,他们会为你制作几乎任何你想要的饮料,从小而强烈的 Espres ...

  6. 实现一个redis连接池

    #*****************jedis连接参数设置*********************#redis服务器ipredis.ip=169.254.130.122#redis服务器端口号red ...

  7. ASP.NET Cookie的登录验证

    做用户登录,我一直用form验证的方式.有时候,为了节省时间,用户希望用户名输入框能够记住用户名,省得下次重新输入.这个时候光用form验证是不行的,因为form验证的话,用户一退出系统就失效了,所以 ...

  8. 如何尽量避免引用jQuery

    Introduction 正如jQuery所宣称的一样,Write Less, Do More.很多时候我们喜欢用它来解决问题.但增加一个库必然意味着更大的网络负担,意味着更高的页面初始载入时间.并且 ...

  9. XSS 攻击实验 & 防御方案

    XSS 攻击&防御实验 不要觉得你的网站很安全,实际上每个网站或多或少都存在漏洞,其中xss/csrf是最常见的漏洞,也是最容易被开发者忽略的漏洞,一不小心就要被黑 下面以一个用户列表页面来演 ...

  10. COGS 1144. [尼伯龙根之歌] 精灵魔法

    ★   输入文件:alfheim.in   输出文件:alfheim.out   简单对比时间限制:1 s   内存限制:128 MB [题目背景] 『谜题在丛林中散发芳香绿叶上露珠跳跃着歌唱火焰在隐 ...