之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环)，其实SVG也可以实现类似的效果，而且两者api惊人的相似。 关于SVG SVG是一种矢量图形，在图形改变尺寸的情况下质量不会损失。 相比canvas，svg有一个很大的优势就是内联进html的时候可以像操作dom…

在上一篇文章 Canvas基础-粒子动画Part2 中讲了让图片做粒子动画。上篇写完不久，想起既然是用Canvas，写上去的东西都可以做粒子动画，那么就补充讲下文字做粒子动画，至于为什么拖了这么久，还不是因为去写公众号和研究微信小程序了，给公众号搞了一个2048形式的小游戏，叫…

在之前的文章 Canvas 基础 - 粒子动画 Part2 和 Canvas 基础 - 粒子动画 Part3 中分别讲了用图片和文字做粒子动画，今天我们来把代码简单整理一下，封装成一个类，能同时支持用图片和文字做粒子动画，而且有更好的灵活性。 封装类 HTML 结构和上一篇的一样，这里从外部引入…

之前写了使用SVG实现一个骚气的圆环： 一个比想象中更骚气的圆-svg实现。后来上线过程中发现渐变的效果出不来，原来是html base标签和内联SVG同时使用引起的一个坑，略偏，记录一下。 base标签 base 标签为页面上的所有链接规定默认地址或默认目标。通常情况下，浏览…

Canvas 是 HTML5 的新东东，提供 javascript 接口来绘制各种图形，本文简单介绍了 Canvas 画图基础的几个小点和需要注意的地方。

紧接上一篇文章 Canvas基础-粒子动画Part1 其实这篇早在一个星期之前就应该发了，无奈事情太多，而且我又跑去写微信公众号了。 粒子动起来 有了上一篇的基础，我们已经可以获得粒子，并将轮廓显示在Canvas上，如果看了之前我写的一些关于 Canvas动画啊，画图啊什么文章…

网页上各种酷炫的粒子动画看的人眼花缭乱，实际上原理却非常简单。 获取像素信息 首先我们需要画张图到Canvas上，这里因为我懒的扣图(实际上是不会)，就找了张jpeg的白底图片。实际上用png的透明图会好很多。 一定要等图片加载完再画，这很重要，可以用判断图片的complete…

动图 说到动图，首先我们想到的 GIF 格式，GIF 在网络上流行已久，各种动态表情包都是 GIF 图做的。但是 GIF 的缺点也很明显，透明背景的 GIF 无法做到像素的绝对平滑过度，于是乎我们可以看到带透明的 GIF 图周围杂边非常明显，如下： 不一样的动图-APNG 通常…

之前那篇Canvas画图-鼠标涂鸦已经可以实现与Canvas的简单交互，这篇会介绍Canvas中实现交互性的一个重要方法isPointInPath。 基本原理 Cavnas的确能实现很多很酷炫狂拽屌炸天的效果，但是交互性要差很多，简单的鼠标单击选中某个图形，都要花费一番周折。 …