代码改变世界

随笔分类 - HTML5

Flexbox + js实现滑动拼图游戏

2015-08-23 20:10 by 那时候的我, 1925 阅读, 收藏, 编辑
摘要: 滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片。 要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等。但是,使用了Flexbox布局以后,这都不需要你去考虑,浏览器会帮你做,Flexbox就是这么的强大。关于Flexbox的介绍可以点击... 阅读全文

HTML5实现刮奖效果

2015-01-21 18:33 by 那时候的我, 3670 阅读, 收藏, 编辑
摘要: 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果。而HTML5的canvas API中有一个属性globalCompositeOperation,这个属性有多个值,而实现刮奖效果要用到的值就是destination-out。意思就是:在已有内容和新图形不重叠的地方,已有... 阅读全文

HTML5 canvas制作童年的回忆大风车

2014-04-20 16:38 by 那时候的我, 2703 阅读, 收藏, 编辑
摘要: 今天看到一篇CSS3写的大风车http://www.cnblogs.com/yaojaa/archive/2013/01/30/2882521.html,感觉CSS3太神奇了,这在以前用CSS是想都不敢想的。记得去年自己用canvas也写过这样的大风车,今天我打算用canvas制作一个一模一样的... 阅读全文

使用HTML5制作loading图

2014-04-10 22:04 by 那时候的我, 1177 阅读, 收藏, 编辑
摘要: 昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章。 这是效果图:这一篇也是没有注释,但这一篇比上一篇更容易理解。后面还会有一些关于HTML5 canvas的文章,都是去年写的。 阅读全文

使用HTML5制作时钟

2014-04-09 22:53 by 那时候的我, 2112 阅读, 收藏, 编辑
摘要: 之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解。 1 2 3 4 html5时钟 5 6 7 8 9 96 97 这是时钟效果:外观不太好看... 阅读全文