js生成图片缩略图

现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片,专业术语也就是生成缩略图,而对于生成缩略图一般做法是通过后端语言php等来生成,但是为了给服务器减压,我们或许可以从前端来着手,先生...

Canvas操作像素实现颜色的增删改

对于Canvas的使用,官方还是提供了不少api,但是任然有许多使用的功能官方没有提供,需要我们自己去实现。 1、增,即颜色填充。 对于颜色填充用fill相关的方法可以实现基本的填充,但是如果我们...

canvas鼠标拖动喷字效果

记得好久之前在w3cfuns上看到有人做过这个效果,对于其实现也许可能还有朋友不是很明白,个人觉得这个效果还是比较简单的,在这里对这个效果做一个简单的介绍。 其实我觉得实现这个效果主要是对各种鼠标...

Canvas中clearRect失效问题

我们在使用canvas的过程中,可能会遇到这样的问题,我们在重绘画布图片的时候,当多重绘的间隔比较短或者说几乎同时执行的时候,我们发现一个问题,clearRect失效了,一半重绘都是在元素状态更新...

Canvas生成姓名文字头像

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

Canvas实现一个Tshirt制作应用

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

canvas中imagedata对象的拷贝

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

Canvas手机壳合成

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

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

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

Canvas模拟海葵摆动效果

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