javascript+HTML5 Canvas绘制转盘抽奖

发布时间：2024-02-27

推荐整理分享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