V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
kylebing
V2EX  ›  分享创造

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

  •  
  •   kylebing ·
    KyleBing · 2023-02-22 12:15:55 +08:00 · 1909 次点击
    这是一个创建于 651 天前的主题,其中的信息可能已经有所发展或是发生改变。

    2023-02-22 11 51 22

    演示地址: 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

    第 1 条附言  ·  2023-02-22 13:54:37 +08:00
    第 3 条附言  ·  2023-02-23 09:34:47 +08:00
    实际项目中的应用,登录页背景: https://kylebing.cn/manager
    10 条回复    2023-02-23 09:27:19 +08:00
    Exia
        1
    Exia  
       2023-02-22 12:51:42 +08:00
    不错,赞一个 👍
    xiaohundun
        2
    xiaohundun  
       2023-02-22 13:09:08 +08:00
    mumuy
        3
    mumuy  
       2023-02-22 13:52:59 +08:00
    直接弄成通用的项目不就好啦!方框、桃心、五角星、月牙
    kylebing
        4
    kylebing  
    OP
       2023-02-22 13:55:17 +08:00
    刚加上浏览器参数,现在可以了。
    kylebing
        5
    kylebing  
    OP
       2023-02-22 13:55:33 +08:00
    @xiaohundun #2 刚加上浏览器参数,现在可以了。
    leontung
        6
    leontung  
       2023-02-22 17:00:43 +08:00
    已 star ,十分棒。不知你是否有产品化此项目的想法,我观察到:1) 办公族繁忙的工作中存在透口气的需要,其中存在不方便刷手机的场景,这时候该如何满足透口气的需求 2 )思考问题的时候人有时会发呆 我前面有感到你这个项目能够满足其中一部分群体的需求,你的配色和动效给人一种”治愈“的感受(举例来说,我是一名产品经理,目前刚写完一部分 PRD 很累想休息会,但公司的电脑装了监控其实不能随意地浏览和工作无关的信息,因此我就盯着它看了会感到挺放松的)。可能的一个思路是做成 chrome 浏览器插件,让它成为每个 tab 的默认背景。 这是我的分析和提案,供参考。
    chaoschick
        7
    chaoschick  
       2023-02-22 21:07:04 +08:00 via Android   ❤️ 1
    我也有一个类似的,也是心 https://alcyonides.gitee.io/blog/heart
    kylebing
        8
    kylebing  
    OP
       2023-02-22 21:17:53 +08:00
    @chaoschick 不错哟
    vitovan
        9
    vitovan  
       2023-02-23 09:21:12 +08:00
    怎么感觉这个心的尾巴怪怪的

    (⊙ˍ⊙)
    kylebing
        10
    kylebing  
    OP
       2023-02-23 09:27:19 +08:00
    @vitovan #9 故意这样的,太正了感觉死板。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5831 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 02:43 · PVG 10:43 · LAX 18:43 · JFK 21:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.