Canvas模拟海葵摆动效果

Canvas模拟海葵摆动效果

海葵在海洋中随着海浪的起伏有节奏的左右摆动(当然也有可能上下摆动),对于其左右摆动的动画,我们可以通过正弦函数的特性来完成,我们都知道正弦函数的区间在-1到1之间,正好满足左右摆动。再结合quad...
会转弯的鼠标跟随效果

会转弯的鼠标跟随效果

实现该效果主要用到两个知识点: 1、使用Math.atan2函数计算偏移角度 2、无限趋近的思想,主要是用到距离的无限趋近和角度的无限趋近 距离的无限趋近: function lerpDis(...
异步加载js/css文件

异步加载js/css文件

页面中的js/css文件在页面加载的时候会阻塞页面的渲染,所以异步加载js/css文件常作为一种网页优化的方法。通过js在页面中动态的创建js和css的链接标签就可以实现js/css文件的一部加载...
简单的实现一个js模板引擎

简单的实现一个js模板引擎

随着web的发展,前端应用变得越来越复杂,javascript MVC思想也开始流行起来,模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,各种模板引擎层出不穷,在各个大型的网上上面...
css三角形的两种实现方法

css三角形的两种实现方法

三角形元素在网页中到处可见,对于三角形的实现方法也不同,有的可能直接用图片,但是很多情况下没有必要,那我们可能就会选择使用css来实现三角形。对于三角形的css实现,我所熟知的有两种: 1、使用三...
js按位运算符及其妙用

js按位运算符及其妙用

大多数语言都提供了按位运算符,恰当的使用按位运算符有时候会取得的很好的效果。 在我看来按位运算符应该有7个: 1、& 按位与 &是二元运算符,它以特定的方式的方式组合操作数中对应的...
使用Canvas绘制虚线段

使用Canvas绘制虚线段

使用过canvas的朋友都知道,canvas官方没有实现虚线绘制的API,但是在实际场景中,我们经常可能会需要绘制虚线,比如裁剪线之类的,那么我们怎么使用canvas来绘制虚线呢? 其实使用can...
js懒加载的实现原理

js懒加载的实现原理

懒加载作为一种提升性能,优化的手段已经在web开发中广泛应用,那么到底什么是懒加载它又是基于什么原理实现的呢? 懒加载说的直白点就是先做一部分事情,剩下的事情等到需要做的时候再做。 我们这里说说在...
js十进制十六进制转换

js十进制十六进制转换

在工作中,我们可能经常会涉及到操作颜色值,而且前后端用的数值是不一样的,打个比方,后端可能存的是10进制值,前端使用的是16进制,那么当我们将数值存到后端的时候需要先将16进制转成10进制,而当我...
Canvas实现微信红包图片

Canvas实现微信红包图片

前一段时间微信曾经出过一个微信红包图片的功能,你只能看到图片的一小部分,其他的部分都做了模糊处理,要想看全部图片,需要先发红包。虽然这个功能只上线了短短几天就下线了,但是他真真正正的存在过。下面我...