轩枫阁

前言

HTML5的canvas有很多应用点，如绘画板、图形绘制、游戏交互、彩票刮刮乐等，除了这些，还有个比较好的点就是主页涂抹一部分之后，页面消失进入主要内容。

wScratch是一个模拟刮刮卡的jQuery插件，可以设置刮开纯色或者图像。

演示

显示刮卡百分比

到达一定百分比清空

查看全文

前言

HTML5 中新增标签Canvas，Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。利用JS，可以实现一些超炫酷的效果。本文所介绍的是基于Canvas实现的炫酷3D动画大背景。

案例一

原版

QQ 官网 http://im.qq.com/pcqq/

demo

http://xuanfengge.com/demo/201411/vector/demo1.html

使用

为方便大家使用，轩枫阁已将主体代码抽出，并示范使用方法（具体看源码），只需加载相关JS并调用即可。不依赖jQery，但是需注意代码执行顺序。

特点

改变3D大背景块颜色，清晰可见，适用于文字较少、加以配图的页面。 查看全文

时间是指宏观一切具有不停止的持续性和不可逆性的物质状态的各种变化过程，其有共同性质的连续事件的度量衡的总称。时是客观存在，而间是人们的思想所划分的

前言

如何表示时间在走呢？如何实现时间可视化呢？就如轩枫阁的轮播图，用高级浏览器就可以看到图片右下角有个会动的圆点，当圆点旋转一周（9s），图片即切换，将时间生动的刻画出来。

实现原理

• canvas绘制蓝色圆形
• canvas绘制白色扇形
• 白色扇形的度数随着时间变大

弧度制单位

rad 角度制单位：度 → 180度 = PI弧度 → 1度 = PI弧度/180度 → 1弧度= 180度/PI弧度

弧度 = 角度*PI/180

角度 = 弧度*180/PI 查看全文

看到过许多的下雪动画，总感觉不够形象生动下面的这个下雪动画，是基于HTML5 Canvas实现的，理解起来也挺简单。

demo地址

先来一览是多生动的效果吧：http://www.xuanfengge.com/funny/html5/snowFall/

小tip：支持的浏览器有Chrome、IE9+、360极速

 需求点分析

• 雪花形状：统一在canvas上绘制
• 随机绘画出雪花形状：运用canvas的绘制圆形渐变
• 雪花飘动画：利用requestAnimationFrame绘制动画帧
• 雪花数量：控制在一定范围，如200片

查看全文