“canvas相关”目录存档

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

2018年03月18日,星期日

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

阅读全文…

CSS, SVG和canvas分别实现文本文字纹理叠加效果

2018年02月27日,星期二

本文这里所说的叠加,就是混合模式中的叠加,也就是说,本文要实现的效果是,文字本身的颜色和纹理进行叠加,而非直接填充纹理。

CSS, SVG和canvas都能实现类似的效果,我们一个一个来看一下……

阅读全文…

crossOrigin属性解决canvas图片getImageData跨域

2018年02月10日,星期六

对于跨域的图片,只要能够在网页中正常显示出来,就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步,通过getImageData()方法获取图片的完整的像素信息,则多半会出错。

那有没有什么办法可以解决这个问题呢?

阅读全文…

canvas文本绘制自动换行、字间距、竖排等实现

2018年02月5日,星期一

和CSS相比,SVG以及canvas对文字排版的支持很弱。

在CSS中天然支持的文本自动换行,其他letter-sapcing字间距,writing-mode竖排等都是一个CSS属性就可以实现。但是在canvas中,全部都不支持。

但是canvas可以方便把文字转换成图片,有些场合,例如广告生成工具就需要canvas前端图片生成,此时我们该如何处理这些文字排版呢?

阅读全文…

canvas实现iPhoneX炫彩壁纸屏保外加pixi.js流体动效

2017年12月14日,星期四

iPhone X手机默认的壁纸是一个非常绚丽多彩的效果,实际上我们使用代码也能实现类似的效果,并且颜色可以定制,甚至我们可以加一些动效,比如说它的颜色像水一样的不断的流动流淌,像云雾一样翻腾。

本文将通过实际案例的方式展示这种效果,同时介绍如何在项目中使用这个效果,以及它实现的原理。希望本文的内容能够对您的学习有所帮助。

阅读全文…

用3D LUT滤镜我做了个在线专业电影级别照片调色工具

2017年12月11日,星期一

花了周日一整天时间做了个专业电影级别照片调色工具,使用的是3D LUT滤镜。欢迎围观。

阅读全文…

canvas getImageData与任意字符图形点、线动效实现

2017年12月9日,星期六

本文介绍如何借助canvas的getImageData方法实现动态文本字符以及图形图像相关的动效。

多种特效,多种实现方法展示。有JS注释详细为压缩demo,有GIF截屏演示,必要的源代码展示。希望本文的内容能够对您的学习有所帮助。

阅读全文…

照片位图转SVG矢量图片JS工具primitive.js等简介

2017年11月30日,星期四

primitive是相对来说比较有名的将照片图片使用几何图形重建的工具。基于原始的这个primitive项目算法,很多开发人员拓展了Java版本,react版本等。自然也有JavaScript版本,就是本文要介绍的primitive.js。以及还会介绍其他一些位图转矢量图JS。

阅读全文…

使用canvas实现和HTML5 video交互的弹幕效果

2017年09月10日,星期日

本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果,适合在个人博客或者运营页面,这种非视频场景使用;另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果,也就是真视频弹幕效果。

阅读全文…

HTML5 file API加canvas实现图片前端JS压缩并上传

2017年07月30日,星期日

很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像,就会遇到因为图片大小限制而不能上传的窘境,不得不对图片进行再处理,而这种体验其实非常不好的。如果可以在前端进行压缩,就不会有这种尺寸限制的问题,自然用户体验就可以大大提升,非常具有价值!

阅读全文…