HTML5实例教程:圣诞彩蛋(一)

Camera360近日推出了一个“圣诞彩蛋”页面,有些意思,所以打算用HTML5仿制一个,顺便记录过程写成教程.

原网页的效果是通过Flash完成的,因为我们使用HTML5,所以改用Canvas完成.

分析

这个游戏看起来的确很简单,它首先显示一个大圆.

大圆 最大的圆

当你的鼠标移动到圆上时,圆会分裂成4个小圆,同样的,鼠标移动到小圆上,小圆也会进行分裂.

各级圆分裂图 各级圆分裂图

总共有8种尺寸的圆.

从这个分裂过程不难看出每一个大圆的颜色实际上是四个小圆颜色的平均值.

分裂到后期应该是与下图类似的效果.

最终效果 最终效果

通过检测网络连接,可以发现Flash请求了图片资源,所以圆应由图片转化而来,且这一计算过程在客户端完成.

原图 原图

原图的长宽皆为512像素,Flash效果的长宽也是512像素,所以原图在转化过程中没有修改过高宽比.

计算圆直径

知道高和宽后,就能推算8种圆的直径了:

  1. 512/1=512px
  2. 512/2=256px
  3. 256/2=128px
  4. 128/2=64px
  5. 64/2=32px
  6. 32/2=16px
  7. 16/2=8px
  8. 8/2=4px

NEXT

在下一个教程中,将教你如何分割原图,并将颜色的平均值保存.

HTML5实例教程:圣诞彩蛋(二)