怎么用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()}

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

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

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

扩展资料

摇一摇周边的技术原理

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

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

使用场景

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

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

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

接入方法

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

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

1、学习html5不需要会java，但是需要编程基础，比如各种JS/JQuery等。

2、学习html5最重要的不是已经会多少东西，而是你的不断学习的学习能力。要明白，技术是时刻在更新的。

学习HTML5可以参考下列进阶知识：

一、前段页面重构

1、PC端网站布局（HTML基础，CSS基础，CSS核心属性；CSS样式层叠，继承，盒模型；浏览器兼容性与宽高自适应；定位、锚点、图片整合；表格，CSS属性与滤镜。）

2、HTML5+CSS3基础（HTML5新增的元素与属性；CSS3选择器、媒体查询；CSS3位移与变形处理；CSS3 2D、3D转换与过度动画；响应式设计。）

3、WebApp页面布局（移动端页面设计规范；移动端切图；文字流式/控件d性/图片等比例/特殊设计的100%布局；等比缩放布局；viewport/meta、rem/vw的使用；移动web特别样式处理）

二、JavaScript高级程序设计

1、原生JavaScript交互功能（基本语法、循环语句、函数与数组、String与Date、BOM与DOM、事件、拖拽效果、cookie存储、正则表达式、Ajax、面向对象基础、运动与游戏开发）

2、面向对象进阶与ES5/ES6应用（Promise/A+、设计模式（观察者模式等）、原型链、构造函数、执行上下文栈与执行上下文、变量对象与活动对象、作用域链、闭包、this、ES5、ES6）

3、JavaScript工具库（DOM库、事件库、AJAX库、原型和继承库、MVVM核心库、基于SPA的路由库）

三、PC端全栈项目

1、jQuery经典交互特效（时间轴特效、tab页面切换效果、网页定位导航特效、滑动门特效、焦点图轮播特效、导航条菜单效果、瀑布流特效、d出层效果、倒计时效果、抽奖效果）

2、PHP+MySQL后端基础（PHP、MySQL、HTTP(s)协议详解、Ajax进阶、跨域与Defered、Apache与Nginx 环境搭建与配置、接口的定义、Mock数据、Restful、前后端联调、前端安全XSS,CSRF,JSON注入）

3、前端工程化与模块化应用（Gulp、Webpack、NPM、Git/SVN、CommonJS、AMD、CMD、ES6模块化）

四、移动端WebApp开发

1、应用Vue.js开发WebApp项目

2、应用React.js开发WebApp项目

3、应用Angular开发WebApp项目

五、混合(Hybrid,RN)开发

1、微信公众号开发

2、微信小程序开发

3、React Native

六、NodeJS基础、MongoDB、GraphGL、Express、Koa、socket 即时通信

??

---