文章关键字 ‘drawImage’

又get到了,JS复制图片到剪切板

2023年09月17日,星期日

封面图 鳐鱼

起初以为只是个小需求,实现JS复制图片到剪切板,直到深入了解,才发现,原来涉及到那么多知识,真是不虚此学。

阅读全文…

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

2018年05月4日,星期五

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

阅读全文…

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

2018年03月18日,星期日

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

阅读全文…

canvas实现任意字符图形的打点或连线动画

2017年12月9日,星期六

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

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

阅读全文…

SVG <foreignObject>简介与截图等应用

2017年08月4日,星期五

SVG图形表现非常给力,但是对于纯粹的文本展示却很吃力,例如希望文字到边缘可以自动换行,结果SVG却很难做到,对于XHTML而言这可以说是天生的理所当然的特性,那有没有什么办法让SVG元素中的文本也如同普通的HTML和CSS那样自动换行呢,有,那就是SVG的<foreignObject>元素!

阅读全文…

小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领域基本入门的一些效果。代码我都专门重新梳理了下,必要注释也都加上去了,方便大家的学习……

阅读全文…