本系列介绍一些作者主观认为值得把玩的“小网站”，愿朋友们多少都能有所收获。这个系列会长期更新，对这个系列感兴趣的朋友可关注，不迷路。
--- 今日介绍 ---
保持冷静，戳我 （Keep Calm and Poke Me）
把玩点：
-
适合烦躁时减压;
-
适合逗小朋友玩;
-
技术学习由浅入深的样板；
主观评价：趣味性 1.5 星，技术性 2.5 星
网址 https://calm.ovh
--- 使用指北 ---
这个小网站支持电脑和手机，操作异常简洁，在电脑上用鼠标或者在手机上用手指拖拽屏幕上的一个类似“奶嘴”的Q弹物件，可以将之拉长、移动，松手自动回弹，像果冻一样摇晃Q弹。
如标题所言，要缓慢冷静的戳，慢慢的拉扯，就像是在“回敬”让你生气的人时那样，同时BGM也会随着拉扯的动作快慢播放声音，适合减压！
快来戳我！
Enjoy！
--- 干货知识 ---
本小节属于技术解析环节，纯技术性干货，适合技术人员，非行业人士可忽略。
网站很简单，实现不简约。
网站由HTML + CSS + Canvas + JS + 10个mp3组成, 屏幕上那活灵活现的类“果冻”Q弹对象可全都是利用JavaScript代码“画”出来的。
核心代码由作者yoichi kobayashi 开源贡献，他先是开源了一个基于Canvas动画编程的框架结构，做基于HTML + Canvas动画编程都可以参考这个结构代码，地址 https://codepen.io/ykob/pen/ogdpoM
后来作者又在此基础上，实现了一个叫Slime（烂泥；黏液）的开源项目，就是“戳我”网站的核心。开源地址 https://codepen.io/ykob/pen/XJqVVa ，在这个开源项目上可以学习到Canvas绘画、数学、动画知识，比如为了定义与精控物体，设置了多达52项控制属性：
没有采用图片素材，而是采用程序代码，将物体给一行一行代码硬画出来。为了达到每秒60FPS的动效，物体在每一帧的位置，都需要大量计算工作，涉及Sin、Cos函数点位计算，涉及角度、弧度转换计算。
项目为了让读者了解清楚工作原理，还贴心的分了三个级别：仅控制点级、所有点位级及全功能级，想研究的朋友可以从“仅控制点级”开始，点位少，起步难度低。
本文介绍的“戳我”小网站，核心功能就是Slim，只是将拖动功能与声音相结合了，显得更加丰富一些。
本系列长期更新！
喜欢的朋友感谢点赞、分享、收藏三连！
标签：Canvas,网站,---,开源,把玩,https,冷静 From： https://www.cnblogs.com/skywayman/p/17089076.html