本文介绍如何借助canvas的getImageData方法实现动态文本字符以及图形图像相关的动效。
多种特效，多种实现方法展示。有JS注释详细为压缩demo，有GIF截屏演示，必要的源代码展示。希望本文的内容能够对您的学习有所帮助。
文章关键字 ‘canvas’
canvas实现任意字符图形的打点或连线动画
2017年12月9日，星期六照片位图转SVG矢量图片JS工具primitive.js等简介
2017年11月30日，星期四primitive是相对来说比较有名的将照片图片使用几何图形重建的工具。基于原始的这个primitive项目算法，很多开发人员拓展了Java版本，react版本等。自然也有JavaScript版本，就是本文要介绍的primitive.js。以及还会介绍其他一些位图转矢量图JS。
使用canvas实现和HTML5 video交互的弹幕效果
2017年09月10日，星期日本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果，适合在个人博客或者运营页面，这种非视频场景使用；另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果，也就是真视频弹幕效果。
SVG <foreignObject>简介与截图等应用
2017年08月4日，星期五SVG图形表现非常给力，但是对于纯粹的文本展示却很吃力，例如希望文字到边缘可以自动换行，结果SVG却很难做到，对于XHTML而言这可以说是天生的理所当然的特性，那有没有什么办法让SVG元素中的文本也如同普通的HTML和CSS那样自动换行呢，有，那就是SVG的<foreignObject>元素！
HTML5 file API加canvas实现图片前端JS压缩并上传
2017年07月30日，星期日很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众，一张原始图片超过2M几乎是标配，此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像，就会遇到因为图片大小限制而不能上传的窘境，不得不对图片进行再处理，而这种体验其实非常不好的。如果可以在前端进行压缩，就不会有这种尺寸限制的问题，自然用户体验就可以大大提升，非常具有价值！
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实现都是一样的套路…
解决文字和text-decoration:underline下划线重叠问题
2016年11月23日，星期三CSS text-decoration:underline可以给内联文本增加下划线，但是，如果对细节要求较高，就会发现，下划线经常会和中文文字的下边缘搞在一起，英文的话甚至直接穿越，看起来就比较香菇蓝瘦。
有没有什么办法让下划线不要靠得这么近，或者文字可以完整清晰地显示呢？
有，方法还不少……
-webkit-box-reflect属性简介及元素镜像倒影实现
2016年08月14日，星期日玻璃，水面会有倒影，有时候我们在web中模拟一些效果，或者实现一些质感的时候，也是需要投影效果的。那我们该如何实现呢？本文从-webkit-box-reflect入手，按照浏览器，依次介绍各种投影效果的实现，很多demo，很多截图很多源代码展示，希望本文的内容能够对您的学习有所帮助！
我的应用
我的应用