Canvas生成姓名文字头像

很多项目管理工具都会有姓名文字头像这样一个功能,这样便于管理者或者成员更容易找到成员相关的内容,对于生成这样的图片方法很多,后端,前端均可生成,下面演示一个用canvas生成文字头像的例子。 代码...

javscript判断鼠标进入方向

之前在别的网站上看到过判断鼠标进入方向然后展示一些效果的例子,以下是我整理的一个比较简单一点的判断鼠标进入方向的例子: <!DOCTYPE html> <html> ...

Canvas实现一个Tshirt制作应用

之前公司做过一个Tshirt制作的应用,我觉得这中间涉及到的东西还是挺多的,为了巩固知识,自己也做了一个,不过之前公司做的那个是基于vuejs来做的,模块化开发,结构比较清晰。而我自己的这个是用原...

canvas中imagedata对象的拷贝

我们在使用canvas的imagedata对象时,经常需要保留原始的imagedata对象,但是对于对象和数组来说不能简单的用一个=号赋值来保存一个当前的数组,对象和数组的赋值只是将某个变量指向了...

Canvas手机壳合成

最近公司准备做一个在线制作手机壳的应用,其底层绘图我们是用canvas来实现的,在这个手机壳应用中有一个功能就是截图,既然底层是用canvas来实现的,那么截图也应该用canvas来实现,但是手机...

js使用canvas来识别简单的验证码

有感于canvas无穷的魅力,使用canvas折腾了一个简单的验证码识别。当然是最简单的验证码识别了,不过准确率还好能达到100%。 首先看一下我们准备识别的验证码,绿色的背景,白色的噪点,黑色的...

Canvas模拟海葵摆动效果

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

会转弯的鼠标跟随效果

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

异步加载js/css文件

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