本文小编为大家详细介绍“怎么使用javascrip和HTML5 Canvas绘制转盘抽奖”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么使用javascrip和HTML5 Canvas绘制转盘抽奖”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。功能需求
1、转盘要美观,转动效果流畅。
2、转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字。
3、转动动画完成后要有相应提示。
4、获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示。
知识要点
1、引用了一个jq插件:awardRotate,用来实现更智能化的转动。
2、使用canvas标签和对应的html5 api 进行操作。
正文
引用大转盘样式
转盘插件所需参数:
由参数可知,我们需要从服务端获取相应的奖品名称,奖品内容,奖品图片页面标签等信息,再对大转盘进行渲染。
所以我们的第一步操作就是向服务端发送请求获取对应的奖品信息,并且遍历到生成大转盘所需的数组参数里:
data.list是我获取来的奖品json数据:
由于客户要求奖品没有“谢谢参与”,所以最低奖品也为“优胜奖”,所以在遍历奖品之后,插入有关“优胜奖”的渲染描述即可:
因为图片加载需要时间,而使用canvas复制图片需要图片加载完成后才能绘制,所以我使用了preloadimages,让所有奖品图片都加载完毕后进行大转盘的渲染工作:
绘制转盘代码:
每一步基本上都有注释,对于canvas方法有不理解的可以百度,或者查询我上面分享的中文手册。
htm免费云主机、域名l代码为:
这篇“html查看器如何卸载”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“html查看器如何卸载”文章吧。 首先,需要说明的是,卸载html查看…