《隐秘的角落》里的笛卡尔的爱心实现。《隐秘的角落》中，张东升在少年宫为学生讲了笛卡尔和他浪漫的“心形线”。讲述的是一个破

我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

《隐秘的角落》中，张东升在少年宫为学生讲了笛卡尔和他浪漫的“心形线”。讲述的是一个破落户儿笛卡尔，街头邂逅大户人家的小姐克里斯汀，俩人一见如故，互相加了微信，在不断的鸿雁传书下，渐生情愫，但是被无情的家族族长（克里斯汀的父亲）棒打鸳鸯，而笛卡尔郁郁成疾，临死前写出来了心脏线方程来表达爱意。

上面的故事，是编的，真实里笛卡尔应该是没有做这件事情

1、极坐标方程

水平方向：

ρ=a(1-cosθ) 或 ρ=a(1+cosθ) (a>0)

垂直方向：

ρ=a(1-sinθ) 或 ρ=a(1+sinθ) (a>0)

2、直角坐标方程

心形线的平面直角坐标系方程表达式分别为

x^2+y^2+a*x=a*sqrt(x^2+y^2)

x^2+y^2-a*x=a*sqrt(x^2+y^2）

3、参数方程

x=a*(2*cos(t)-cos(2*t))

y=a*(2*sin(t)-sin(2*t))

这里当然是参数方程更加方便，得到x,y 那么就能拿到 position的坐标值 x,y了。接下来就是按部就班，绘制心脏线

容器 <div id="botBox"></div>
定义容器样式及点的通用样式

#botBox{
    position: relative;
    transform: rotateZ(-90deg);
  }
  .absolute{
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
  }

绘制心脏线

let a = 40
      max = 40;
      let start = 0
      let arr = []
    while (start <= max) {
      const cal = 2 * start;
      x = a * (2 * Math.cos(start) - Math.cos(cal));
      y = a * (2 * Math.sin(start) - Math.sin(cal));
      arr.push([x,y])
      start += 0.1 
    }
    arr.map(v => {
      let box = document.createElement('div')
      box.className = 'absolute'
      box.style.left = v[0]+'px'
      box.style.top = v[1]+'px'
      document.getElementById('botBox').appendChild(box)
    })

代码块如下： 这里假如想酷炫的话，可以把点的颜色进行随机，还可以预先将点随机分布在全屏，点击按钮通过过渡来实现慢慢汇聚成心形的效果