canvas 是 H5 一个超棒的元素，能创造好多漂亮的效果。现在就用它最简单的几个方法，画一只酷炫的熊本熊（恩，酷炫是因为熊本熊本来就是一种酷炫的生物）。

HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。 这里看到压缩效果已经由原来的8.5Mb到…

之前使用这个框架写过一个卡片DIY的项目，中间遇到很多问题都只能通过google或github issues才能解决，国内资料较少，所以才想写这篇文章来简单的做下总结，希望可以帮到其他人哈。 Fabric.js 是一个强大的H5 canvas框架，在原生canvas之上提供了交…

这个动画效果是在网易云音乐 app 上看到的，抱着复习 canvas 的心态来实现。 效果参照已实现的上方链接。 1. 参数设置 2. 编写构造函数 我们知道，动画的原理，就是趁脑子不注意反应不过来的时候偷偷换上一副差不多的画面，这样一步一步的替换，就形成了动画，而这一步一步就…

灵感来源于前些天捡到钱了，就想着是时候给自己买辆车了，工作这么多年了应该对自己好一点，在网上搜索了一下看到这个车型。其实几年前是买过一辆的，但是不到一个月就被人偷了，伤心了好久。这次一定锁好，上三把锁保证小偷再也偷不走了，于是我拿着钱去买了些益力多，跟同事分享了，心情还是比较愉…

SVG是矢量图形表示，它的一个强大之处在于path标签可以表示任意的矢量形状，利用好这个path可以做出很多传统html/css做不出来的效果。下面举几个例子。 1. 做路径动画 利用animateMotion结合path做的动画，具体说明可见上文。 2. 实现不规则形状的点击…

工作的时候收到了UI的设计图，有一个类似进度盘（话说我也不大清楚官方叫法是啥）的效果。。就想起了荒废了好久的canvas。确认过效果，就用canvas来玩一下吧。。 确认了需要绘制的部分起码有6块。 接下来我们可以让进度条动起来。 经过的路程，在这就是角度degree，因为是进…

贝塞尔曲线于 1962 年，由法国工程师皮埃尔·贝济埃（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。 贝塞尔曲线主要用于二维图形应用程序中的数学曲线，曲线由起始点，终止点（也称锚点）和控制点组成，通过调整控制点，通过一定方式绘制的贝塞尔曲线形…

和小程序以及 Web 不同的是，小游戏创建 Stage 不需要传任何参数。 除了 Stage 构造函数比小程序第四个参数 this，其他使用方式都一样。 group 拥有常用的 add 和 remove 方法进行元素的增加和删除。先 add 的会先绘制，所有后 add 的会盖在…