“canvas相关”目录存档

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

2017年07月30日,星期日

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

阅读全文…

小tip:JS前端创建html或json文件并浏览器导出下载

2017年07月5日,星期三

我们使用JS创建了一个动态的JSON数据,希望可以保存为JSON文件到本机系统,传统做法可能需要复制粘贴,而实际上,我们可以直接使用JS直接创建对应的JSON文件并让浏览器下载,而且代码和原理都出乎意料的简单。

阅读全文…

小tips:使用canvas在前端实现图片水印合成

2017年05月17日,星期三

图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。

随着HTML5发展和现代浏览器的占比越来越高,我们其实也可以在前端直接进行图片的合成。优点在于,响应更快,体验更好;如果是和文字进行合成,我们可以利用客户端字体,视觉展现效果更丰富;同时展示和合成全部都是前端完成,因此更利于维护。

阅读全文…

canvas 2D炫酷动效的实现套路和需要的技术积累

2017年03月18日,星期六

目前在web领域,基本上看到那些酷酷的2d动效,都是canvas实现的,flash已经基本上都被淘汰了,canvas效果的实现,无需安装任何插件,IE9及其以上浏览器支持,至少在移动端,大家可以放心大胆使用,甚至webGL 3D效果都可以尝鲜。

无论是雪花飘,星星动还是粒子飞,其canvas实现都是一样的套路…

阅读全文…

canvas图形绘制之星空、噪点与烟雾效果

2016年06月2日,星期四

本文的3个效果都是源自我最近做的几个真实的项目,是canvas领域基本入门的一些效果。代码我都专门重新梳理了下,必要注释也都加上去了,方便大家的学习……

阅读全文…

小tips: CSS或JS实现gif动态图片的停止与播放

2015年12月5日,星期六

如题,本文介绍如何使用CSS或者JS等前端方法实现代码控制gif图片的暂停或者播放。一如既往,有demo有截图还有必要的源代码展示,更关键的是,本文gif比较多……

阅读全文…

小tip: SVG和Canvas分别实现图片圆角效果

2014年06月30日,星期一

实现图片圆角的方法很多,图片覆盖,CSS3圆角,SVG, Canvas都可以实现,前两个大家可能都比较熟悉,这里,着重介绍后面2种技术实现。希望在某一时刻对有需要的同行能有帮助。必须的,有demo, 有截图,有源代码展示。

阅读全文…

CSS3 box-shadow盒阴影图形生成技术

2013年11月29日,星期五

理论上,CSS3 box-shadow盒阴影可以生成任意的图形,小月格格的靓照,含韵格格的靓照那都不在话下。本文且听后宫茶话会上关于CSS3 box-shadow盒阴影图形生成技术的分享。截图、demo源代码示意,美女靓照一个都不少。说不定,你会有别样的收获哦!【挑眉】

阅读全文…

贝塞尔曲线与CSS3动画、SVG和canvas的基情

2013年08月30日,星期五

CSS3动画、SVG和canvas都与贝塞尔曲线存在基情关系,哟呵呵呵,本文就将揭示其中不为人知的基情,习惯八卦的你可不能错过哦……

阅读全文…

HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

2011年10月10日,星期一

技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了。新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全貌还是很有必要的。虽不是时代缔造者,也不至于落后于时代发展大潮。
互联网的发展相当的神速,其他不说,就前端技术这块,出现的些新名词或生名词就让人眼花缭乱,应接不暇,比如说:HTML5 Canvas, WebGL, CSS Shaders, GLSL等。你是否有这样的疑问……

阅读全文…