关于canvas的一个实例教程--刮刮乐
今天,结合上一篇文章的抽奖小游戏,
用canvas来写一个小游戏——刮刮乐。
首先,用canvas做一个画布,宽高各为200px。然后再把一个span标签定位到画布上。
效果如下所示
接下来获取一下canvas标签,定义一个数组,之后用canvas画一个灰色的正方形把这部分给盖住。
效果如下
用canvas创建一个透明的圆,当鼠标移动时,清除canvas上的灰色图层,显示下面的文字(一等奖)。
效果如下
最后,我们让刚开始定义的数组打乱随机,然后要清除灰色的图层时,显示不同的几等奖。
效果如下
希望对各位有所帮助,谢谢!
文章推荐
-
HTML在线编辑器的调用方法和使用方法
html在线编辑器不需要懂得使用dreamweaver,会用word就会使用此编辑器,在文章系统或者是新闻系统需要文字编...
H5教程
3个月前 (10-19) 124 -
AlloyTouch全屏滚动插件 30秒搞定顺滑H5页
使用姿势在设计全屏滚动插件的时候,希望开发者几乎:不用写任何脚本快速生成精致H5支持PC滚轮和移动触摸酷炫的转场动效灵活...
H5教程
3个月前 (10-19) 125 -
HTML5 js实现拖拉上传文件功能
在html5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能 在拖动目标上触发事件 (源元素): ...
H5教程
3个月前 (10-19) 122 -
Canvas and Drawables 翻译第一集
android官方原文地址:http://developer.android.com/guide/topics/grap...
H5教程
3个月前 (10-19) 129 -
Canvas and Drawables 翻译第三集
Android官方原文地址:http://developer.android.com/guide/topics/grap...
H5教程
3个月前 (10-19) 127
最新文章
- 什么样的企业最需要Python开发人员? 37秒前
- 揭示Python编程行业中具备未来潜力的就业方向 1分钟前
- 如何利用Python构建智能语音助手 2分钟前
- Python程序:输入逗号分隔的字符串 3分钟前
- 探索Python在人工智能中的引人注目应用案例 4分钟前
- Python程序将一个元素添加到数组中 5分钟前
- 揭示Python编程行业中最有激情的就业方向 5分钟前
- Python编程能力对初入职场的毕业生的重要性 7分钟前
- 在Python中更新嵌套字典 7分钟前
- Python脚本自动刷新Excel电子表格 8分钟前