位置: 编程技术 - 正文
javascript+HTML5 Canvas绘制转盘抽奖
编辑：rootadmin推荐整理分享javascript+HTML5 Canvas绘制转盘抽奖，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
之前做过的项目中，有需要抽奖转盘功能的。项目已经完工一段时间了，也没出现什么严重的bug，所以现在拎出来分享给大家。
功能需求1、转盘要美观，转动效果流畅。2、转盘上需要显示奖品图片，并且奖品是后台读取的照片和名字。3、转动动画完成后要有相应提示。4、获取的奖品具体算法在数据库里操作，前端只提供最后的效果展示。
知识要点1、引用了一个jq插件：awardRotate，用来实现更智能化的转动（插件下载： api 进行操作。(canvas中文手册可以查看 由参数可知，我们需要从服务端获取相应的奖品名称，奖品内容，奖品图片页面标签等信息，再对大转盘进行渲染。所以我们的第一步操作就是向服务端发送请求获取对应的奖品信息，并且遍历到生成大转盘所需的数组参数里：
data.list是我获取来的奖品json数据：
由于客户要求奖品没有“谢谢参与”，所以最低奖品也为“优胜奖”，所以在遍历奖品之后，插入有关“优胜奖”的渲染描述即可：
因为图片加载需要时间，而使用canvas复制图片需要图片加载完成后才能绘制，所以我使用了preloadimages，让所有奖品图片都加载完毕后进行大转盘的渲染工作：
绘制转盘代码：
每一步基本上都有注释，对于canvas方法有不理解的可以百度，或者查询我上面分享的中文手册。html代码为：
效果图：
点击事件执行代码：
上面的代码实现了基本上的逻辑，还需要一个转动转盘的方法来响应服务端传过来的结果：
好了 主要的功能代码都已分享完毕了，还有些工具方法不理解的，可以留言 我会补充进去的。总结canvas是html5很强大的一张王牌，可以实现许多绚丽的效果，希望本文可以帮到一些正在学习使用canvas的朋友们。
浅析JavaScript中浏览器的兼容问题 浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。我们在讲老版本浏览器兼容问题之前，首先要了解什么是能力检测，它是来检测浏览
javascript实现简单计算器效果【推荐】 最终效果如下图-2，有bug：就是整数后点击%号结果正确，如果小数后面点击%的话结果就错误！其他都正常，求指点：input的value是string类型的，在JS中改
javascript实现仿百度图片的瀑布流加载效果 由于没有服务器，就用一个json字符串作为下拉时加载图片数据的来源了html:!DOCTYPEhtmlhtmlheadmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/scriptsrc="js/wate
标签: javascript+HTML5 Canvas绘制转盘抽奖
本文链接地址:https://www.jiuchutong.com/biancheng/373476.html 转载请保留说明！上一篇：深入浅析JavaScript中的constructor(java script教程)
下一篇：浅析JavaScript中浏览器的兼容问题(javascript entries)
