怎么用html5实现 抽奖效果

这个需要用到H5新标签：canvas绘制图形，利用js来实现抽奖效果，实现步骤腔升培如下：

var num = 6// 奖品数量 var canvas = document.getElementById('canvas')var

btn = document.getElementById('btn')if(!canvas.getContext){

alert('抱歉！浏览器笑森不支持。')return} // 获取绘图上下文 var ctx = canvas.getContext('伍唯2d')for

(var i = 1i <= numi++) { // 保存当前状态 ctx.save()// 开始一条新路径

ctx.beginPath()// 位移到圆心，下面需要围绕圆心旋转 ctx.translate(150, 150)// 从(0,

0)坐标开始定义一条新的子路径 ctx.moveTo(0, 0)// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180

公式进行计算。 ctx.rotate(360 / num * i * Math.PI/180)// 绘制圆弧 ctx.arc(0, 0, 150, 0, 2

* Math.PI / num, false)if (i % 2 == 0) { ctx.fillStyle = '#ffb820'}else{

ctx.fillStyle = '#ffcb3f'} // 填充扇形 ctx.fill()// 绘制边框 ctx.lineWidth = 0.5

ctx.strokeStyle = '#f48d24'ctx.stroke()// 恢复前一个状态 ctx.restore()}

用css3还是Canvas？自己写还薯弊是用引擎？用引擎的话用哪个？

不管用什么方法做，首先数据层都是一样的，比如一个圆盘分成n个扇形图块；转盘转起来，其实就是定时点亮一个新升手简图块，同时恢复之前点亮的图块。写到这里，我发现和扇形的角度没有任何关系，甚至不用html5技吵裤术也能做。

微信摇一摇抽奖是通过微信摇一摇周边来实现的。

摇一摇周边是微信基于低功耗蓝牙技术的O2O入口级应用，作为微信在线下的全新功能，为线下商户提供近距离连接用户的能力，并清虚支持线下商户向周边用户提供个性化营销、互动及信息推荐等服务。

当手机的蓝牙处于打开的状态，微信的用户在再通过手机的微信使用摇一摇功能，这时如果处于iBeacon设备的信号范围内，摇一摇手机后就会自动出现周边，就可以获取周边的优惠等活动信息。

扩展资料

摇一摇周边的技术原理

1、摇周边是基于微信“摇一摇”与iBeacon技术的全新服务。

2、通过基于低功耗蓝牙（蓝牙4.0）的iBeacon协议，商家能够在iBeacon设备的信号覆盖范围内为用户提供基于其高精度位置、时间等的个性化服务，从而连接用户与线下空间。摇周边与微信的其他线下连接能力一道，加速促成了微信O2O闭环的实现。

使用场景

1、用户通过“摇一摇周边”摇出的服务页面是基于HTML5定制的。借助摇周边，人们的生活将更加方便：只要摇一摇手机，可以马上获知周边信息，随时发现感兴趣的店，即时和商户互动，获取优惠、进行评价等，线下和线上的体验同时进行。

2、同时，接入了“摇一摇周边”的商家也能通过线上、线下两方面信息的结合，对顾客进行更精准的客流分析和用户营销。

3、常见应用场景有：零售和餐饮、博物馆和景区、线下广告和城市服务、会议和展览。

接入方法

申请接入摇周边的条件非常简单，商户只要拥有租稿1个经过微信认证的公众帐号（订阅号、服务号均可），按流程指引5分钟即可答型燃完成申请接入的 *** 作。申请审核通过后，按照首页的配置流程指引，即可成功启用微信摇一摇周边

参考文献：百度百科-微信摇一摇

---