![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
canvas-read
文章平均质量分 74
让我们一起读懂酷炫的canvas特效是怎么写的吧
VtoC
不会前端
展开
-
canvas-网页蜘蛛网特效代码解读
拿到代码第一感觉就是:这是人写的代码?感觉像是经过打包后的代码,但是看吧又能看得懂一点点。尝试下将其拆分成正常人能看懂的代码,发现还是有可能的,经过了一个下午的拆分,慢慢拆卸及修改变量名,改成了下面这样能让人基本不会害怕的代码:做完这一步,基本功能的实现逻辑就能懂一大半了。整个功能的基本实现是在页面上所有的随机点的随机运动下实现的。就类似下面这图:页面初始化时,给每个随机点都给一个随机方向。当这个点撞到屏幕边界时再做个镜面反射反弹继续运动。当没有鼠标时,如果某个点移动到另一个点的指定距离内时,将这两个原创 2022-07-05 11:13:15 · 636 阅读 · 0 评论 -
JS中的弧度与角度
一个角有两种计量单位:弧度、角度如一个圆。两条射线从圆心向圆周射出,形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆周长的360分之一时,两条射线的夹角的大小为1度。当角所对的弧长等于半径时,角的大小为1弧度,角所对的弧长是半径的几倍,那么角的大小就是几弧度。所以:。半圆(弧长 = 半径的Π倍)的弧度就是Π,整圆的弧度就是2Π。js中的Π就是这个常量。所以,拿一个圆举例:......原创 2022-07-04 17:29:33 · 1425 阅读 · 0 评论 -
canvas - 酷炫粒子文字效果代码解析
先看效果:再放源代码:以上代码复制到一个html文件中即可预览。接下来从程序运行顺序开始解读:就是这一段代码:其中、、、、四个变量没什么说的,说下其他三个:不懂什么意思的就先放这,继续往下看。先不看下面的构造函数。声明完全局变量后就是加载图片并绘制到canvas上了:就是下面一段代码:在图片在页面上加载完成以后,就要把图片绘制到canvas上了:上面的,是将屏幕宽度和高度减去图片宽度后除以二得到的canvas的左上角的x,y轴坐标位置,其目的是让canvas位于整个窗口的正中间。然后就是使用drawIm原创 2022-07-01 17:23:47 · 978 阅读 · 0 评论