一只

写在最前本次的分享是一个基于canvas的更新图片特效实现。其中主要涉及canvas中getImageData()、putImageData()、toDataURL()方法的使用。效果请看下面。欢迎关注我的博客，不定期更新中——PS:请在本地服务器中打开页面，因谷歌浏览器中会有跨域问题，如需node静态服务器可以参照这个地址

写在最前记得以前在人人上看到一个分享，讲解基于js的截图方案，详细的不记得了，只记得还挺有意思的貌似用了canvas？所以这次打算自己写一个分享给大家作者的思路。这只是一个很简陋的小demo如有bug请提issues。按照惯例po代码地址；以及作者博客的github仓库，不定期更新中——[捂脸]求star效果图整体思路设置开始/结束快捷键开始后将DOM绘制成canvas来覆盖原始

写在最前本次分享一下在canvas中将绘制出来的折线段的棱角“磨平”，也就是通过贝塞尔曲线穿过各个描点来代替原有的折线图。欢迎关注我的博客，不定期更新中——为什么要平滑拟合折线段先来看下Echarts下折线图的渲染效果： 一开始我没注意到其实这个折线段是曲线穿过去的，只认为是单纯的描点绘图，所以起初我实现的“简(丑)易(陋)”版本是这样的： 不要关注样式，重点就是实现之后才发现看起来人家Ec

写在最前本次分享一下使用canvas实现粒子效果拼出你想要的文字。欢迎关注我的博客，不定期更新中——起因不久之前看到大搜车团队出品的easy mock产品的界面中有一个使用粒子拼出“mock so easy”的效果，感觉非常有意思，就像下面这样： 当然了，这个easy mock的界面中还有粒子汇聚、散开、以及缓动等效果，这些在之后的文章中会不定时的更新实现思路。我当时看到这个效果的时候是一段单

写在最前本次分享一下使用canvas来进行视频播放并且添加弹幕功能。欢迎关注我的博客，不定期更新中——效果图示例源码见：源码地址 可以看到上方为一段视频，下面是用canvas来重新绘制的视频，并且支持动态的添加弹幕。canvas载入视频canvas中的drawImage方法绘制图片所需要的数据源不单单是某张图片，同样可以是使用视频的某一帧来进行绘制。就像这样：var video = documen

写在最前由于原生的Canvas最高只支持到三阶贝塞尔曲线，那么我想添加多个控制点怎么办呢？（即便大部分复杂曲线都可以用3阶贝塞尔来模拟）与此同时，关于贝塞尔控制点的位置我们很难非常直观的清楚到底将控制点设置为多少可以形成我们想要的曲线。本着解决以上两个痛点同时社区内好像并没有N阶的解决方案（js版）故这次作者非常认真的开源了bezierMaker.js！bezierMaker.js理论上支持N阶贝塞

写在最前本次分享一个用canvas粒子渲染文字的“完整”版实现，功能包括：随机粒子缓动动画，粒子汇聚、发散，并拼出你想要的文字。本文继续上面一节基于canvas使用粒子拼出你想要的文字的基础效果，完善了在文字拼接过程中的粒子效果。欢迎关注我的博客，不定期更新中——上节回顾自上次的分享基于canvas使用粒子拼出你想要的文字，我们实现了一个可配置的用粒子拼出想要的文字效果，不过这个效果是静态的，就像这

写在最前在之前的这篇bezierMaker.js——N阶贝塞尔曲线生成器的文章中我们提到了对于高阶贝塞尔公式的绘制与生成。不过更多的童鞋看到后可能会不知道其使用场景是什么。故作者本次分享一下基于bezierMaker.js实现的将静态图片按照自定义曲线轨迹扭曲图片并合称为动态效果。欢迎关注我的博客，不定期更新中——效果预览之前的描述可能不是很清楚我们直接看下效果图：首先加载一张图： 然后通过bez

写在最前在之前的这篇文章中我们提到了对于贝塞尔公式的运用。本次分享一下如何推导贝塞尔公式以及附一个简单的��即小球跟随曲线轨迹运动。欢迎关注我的博客，不定期更新中——效果预览demo地址对于如何绘制连续的贝塞尔曲线可以参照这篇文章：基于canvas使用贝塞尔曲线平滑拟合折线段在本例中生成的曲线由以上文章中的源码提供。贝塞尔曲线公式推导上面这张图是贝塞尔曲线的完整公式，看起来一脸懵逼=。=，因为这是N