js 一个心形 canvas 动画背景，漂动的心

[kylebing]

演示地址： https://kylebing.cn/test/animate-heart-canvas/
演示 - 五颜六色: https://kylebing.cn/test/animate-heart-canvas/?hMin=0&hMax=360

github: https://github.com/KyleBing/animate-heart-canvas

---

具体的配置参数有挺多，可以查看源码根据自己喜好修改。

自从整完上一个方块的 canvas 背景之后感觉挺好玩，就又整了一个，感觉停不下了。

---

上一个方块动画背景： https://www.v2ex.com/t/916213

添加演示项目对浏览器地址参数的支持，比如你可以这样测试：

https://kylebing.cn/test/animate-heart-canvas/?hMin=0&hMax=360&countHeart=500&sizeMin=10&sizeMax=50
https://kylebing.cn/test/animate-heart-canvas/?hMin=160&hMax=230&countHeart=200&sizeMin=10&sizeMax=300

添加背景颜色设置

https://kylebing.cn/test/animate-heart-canvas/?hMin=0&hMax=360&countHeart=500&sizeMin=10&sizeMax=50&bgColor=%233d3d3d

实际项目中的应用，登录页背景： https://kylebing.cn/manager

[Exia]

不错，赞一个 👍

[xiaohundun]

https://kylebing.cn/test/animate-heart-canvas/?countHeart=1&hMin=0&hMax=180
数量不起作用嘛

[mumuy]

直接弄成通用的项目不就好啦！方框、桃心、五角星、月牙

[kylebing]

刚加上浏览器参数，现在可以了。

[kylebing]

@xiaohundun #2 刚加上浏览器参数，现在可以了。

[leontung]

已 star ，十分棒。不知你是否有产品化此项目的想法，我观察到：1) 办公族繁忙的工作中存在透口气的需要，其中存在不方便刷手机的场景，这时候该如何满足透口气的需求 2 ）思考问题的时候人有时会发呆 我前面有感到你这个项目能够满足其中一部分群体的需求，你的配色和动效给人一种”治愈“的感受（举例来说，我是一名产品经理，目前刚写完一部分 PRD 很累想休息会，但公司的电脑装了监控其实不能随意地浏览和工作无关的信息，因此我就盯着它看了会感到挺放松的）。可能的一个思路是做成 chrome 浏览器插件，让它成为每个 tab 的默认背景。 这是我的分析和提案，供参考。

[chaoschick]

我也有一个类似的，也是心 https://alcyonides.gitee.io/blog/heart

[kylebing]

@chaoschick 不错哟

[vitovan]

怎么感觉这个心的尾巴怪怪的

(⊙ˍ⊙)

[kylebing]

@vitovan #9 故意这样的，太正了感觉死板。