“Canvas相关”目录存档

任意两个点的曲线连接JS算法

2023年02月27日,星期一

canvas 曲线

突发奇想给自己想了个需求, 抽时间研究并实现了下,作为日后的技术储备,等待厚积薄发。

阅读全文…

兼容IE浏览器的图片局部高斯模糊实现

2021年09月30日,星期四

局部模糊占位图

CSS实现高斯模糊很方便,但是如果要兼容IE怎么办,如果希望局部模糊怎么办,如果希望模糊的图像有合成能力怎么办,此时,还是得借助 canvas,本文就深入介绍如何使用 canvas 实现带羽化的局部模糊效果。

阅读全文…

JS判断图像背景颜色单一还是丰富

2021年06月27日,星期日

图像相似度占位

最近接到一个需求,需要判断图片是不是视觉上颜色看起来相似,还是色彩丰富,一番尝试下来,最终效果还不错,已开源,有demo,相信可以帮到大家。

阅读全文…

搞懂SVG/Canvas中nonzero和evenodd填充规则

2018年10月3日,星期三

nonzero evenodd缩略图

只要是路径填充,都有两种规则,nonzero和evenodd,无论是SVG中的路径填充,还是Canvas中的路径填充,如果还有其他和路径相关的技术(甚至设计软件),也离不开这两种填充规则。换句胡说,这是超越各种语言,普世通用的技能点。下面,看看我能不能用足够精简的语言,尽可能让大家都搞懂这两种路径填充规则。

阅读全文…

Canvas中颜色过渡动画效果的实现

2018年07月22日,星期日

canvas颜色过渡处理缩略图

在CSS3中,我们要想实现从A颜色到B颜色的过渡效果,是相当容易的,只要指定起止颜色,配合transition过渡或者animation动画都可以时间我们想要的效果。

但是,在<canvas>中却没有这么简单,因为<canvas>本质上是一个静态画布,要想实现颜色变化,需要JS去不断绘制,实现起来要比CSS实现麻烦很多。再加上颜色值本身就不一定是纯粹的数值,更增加了我们实现的难度。

本文就将通过多个案例,逐步深入,介绍一些在Canvas中的颜色处理技巧,有些技巧说不定会让你大开眼界。

阅读全文…

canvas HTML属性尺寸和CSS尺寸多个细节深入

2018年07月8日,星期日

原本以为canvas元素尺寸和img元素一样,结果深入一研究发现,还是有不少差异的,有兴趣可以进来看看,说不定可以学到点东西。

阅读全文…

二次元live2d看板娘效果中的web前端技术

2018年05月21日,星期一

想要在网页中插入看板娘效果,其实很简单,复制复制,粘贴粘贴代码就有了。但具体原理和技术实现是怎样的呢?本文就将介绍Live2D相关技术以及在web网页中的应用。有非常卡哇伊的demo,有必要的截图和源代码展示,希望本文的内容能够对您的学习有所帮助。

阅读全文…

纯前端实现可传图可字幕台词定制的GIF表情生成器

2018年05月4日,星期五

这两天晚上在家自己做了个可以传图,可以写台词的GIF表情图生成器。可以使用提供的模板,也可以自己传图制作,关键是纯前端实现的,这个有点厉害了,有兴趣可以进来看看。

阅读全文…

JS检测PNG图片是否有透明背景、抠图等相关处理

2018年05月1日,星期二

用户上传图片,如果是PNG图片,有时候我们希望这张PNG图片背景不要是透明的,有时候又希望是透明的,有没有什么方法可以直接在前端就检测出是否是含透明区域的图片,以及做出相关的体验优化处理呢?如果非透明图片想要非常方便快速变成透明图片,又当如何处理呢?本文会提供详尽的解答,丰富的配图,必要的源代码,希望本文的内容能够对您的学习有所帮助!

阅读全文…

小tips: 在canvas上实现元素图片镜像翻转动画效果

2018年03月18日,星期日

CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转,只需要一行CSS就可以了。但是在canvas中,则要麻烦一些,麻烦的并不是无法翻转,而是坐标系的定位……

阅读全文…