画影图形指描画犯人面影，悬赏通缉。这里用法明显有问题，不过取其表义而已。 在一个前端看来，画图有三种方法，Cavas，SVG 以及 CSS。至于三者优劣，将在此针对各种图形做逐一比较，有方，圆，椭圆，扇形，多边形，渐变，文本处理以及动画 描边与填充是图形的基本属性。 在 CSS…

效果源码终于到年底了，再过两天我也要回家过年了，想想就激动呢！今天给大家带来一个基于移动端的canvas价格选择效果，设计给的效果是这样的。主要功能就是拖动标尺变动价格。而且支付宝和京东金融的里也有这

这篇是学习和回顾canvas系列笔记的第五篇，完整笔记详见：canvas核心技术。 在上一篇canvas核心技术-如何实现简单的动画笔记中，我们详细学习了如何进行canvas坐标系的平移，缩放，旋转等操作来实现一些比较简单和单一的动画。但是在实际动画中，影响一个动画的因素是很多…

讲一讲 Canvas 究竟是个啥

相信很多同学都用过 canvas，其操作简单而言就是擦除和绘制，当 canvas 动效越来越复杂的时候，我们时常会担心一帧中的计算超过 16ms，因为此时给用户看到的效果就会明显卡顿。对此我们写了一篇关于 canvas 的「最佳实践」，希望对你有所启发：《Canvas 最佳实践（性能篇）》 ——淘宝 FED

本文首发于我的个人博客：http://cherryblog.site/github 项目地址：https://github.com/sunshine940326/canvas-nest 首先上效果图：最终效果图 因为使用 gif 图片的原因，线条不是很清晰，大家可以到我的博客观看效果…

前段时间遇到了一个移动端对图像进行裁剪、压缩、旋转的需求。 考虑到已有各轮子的契合度都不高，于是自己重新造了一个轮子。 在HTML5时代，canvas的功能已经非常强大了，可以进行像素级的操作。像图像裁剪、压缩就都是基于canvas来实现的。 关于其中原理，无非就是利用canv…

起初，在公司做一些活动页的时候，经常需要用到截图分享的千人千面的功能，而且这种需求并不止一两次，而是经常会出现在各种各样的截图场景。第一次碰到这种需求的时候，基本上都会去手撸canvasAPI去做渲染功能，这种情况的步骤大致如下： 面临的主要问题是复用性太差，其次是性能上也有问…

去年圣诞节产品提了一个活动需求，其中有一个下雪的背景动画。在做这个动画的过程中加深了对 canvas 动画的一些了解，在这里我仅是抛砖引玉的分享一下，欢迎各位大佬批评。 代码已上传至 github ，感兴趣的可以 clone 代码到本地运行。望给个 star 支持一下。 UI …