摘要：
滑动拼图就是把一张图片分成几等份，打乱顺序（下图），然后通过滑动拼凑成一张完整的图片。 要实现一个拼图游戏，需要考虑怎样随机的打乱顺序，怎样交换两张图片的位置，等等。但是，使用了Flexbox布局以后，这都不需要你去考虑，浏览器会帮你做，Flexbox就是这么的强大。关于Flexbox的介绍可以点击... 阅读全文
随笔分类 - HTML5
HTML5实现刮奖效果
2015-01-21 18:33 by 那时候的我, 3880 阅读, 收藏, 编辑
摘要：
要实现刮奖效果，最重要的是要找到一种方法：当刮开上层的涂层是就能看到下层的结果。而HTML5的canvas API中有一个属性globalCompositeOperation，这个属性有多个值，而实现刮奖效果要用到的值就是destination-out。意思就是：在已有内容和新图形不重叠的地方，已有... 阅读全文
HTML5 canvas制作童年的回忆大风车
2014-04-20 16:38 by 那时候的我, 2909 阅读, 收藏, 编辑
摘要：
今天看到一篇CSS3写的大风车http://www.cnblogs.com/yaojaa/archive/2013/01/30/2882521.html，感觉CSS3太神奇了，这在以前用CSS是想都不敢想的。记得去年自己用canvas也写过这样的大风车，今天我打算用canvas制作一个一模一样的... 阅读全文
使用HTML5制作loading图
2014-04-10 22:04 by 那时候的我, 1312 阅读, 收藏, 编辑
摘要：
昨天发了一篇使用HTML5 canvas写的时钟的文章，今天发一篇关于使用HTML5制作loading图的文章。 这是效果图：这一篇也是没有注释，但这一篇比上一篇更容易理解。后面还会有一些关于HTML5 canvas的文章，都是去年写的。 阅读全文
使用HTML5制作时钟
2014-04-09 22:53 by 那时候的我, 2298 阅读, 收藏, 编辑
摘要：
之前看到别人用HTML5制作时钟，自己也写了一个，这是很久以前写的了，没有注释，现在自己看都晕了(注释的重要性就体现在这边了)，找时间加上注释，让自己和别人都比较好理解。 1 2 3 4 html5时钟 5 6 7 8 9 96 97 这是时钟效果：外观不太好看... 阅读全文