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

<html>

<head>

</head>

<p><b><font size="5"><div style="background:yellow">个人基金投资者投资情况调查问卷</div></font></b></p>

<p>(1)逆选择投资公募基金的主要原因是：（）</p>

<input type="radio" value="V1" checked name="R1">公墓运作管理规范。信息披露全面，可以方便地查找相关信息，申购，赎回等都很便利<br>

<input type="radio" name="R1" value="V2">公墓基金有比较强大的投研团队<br>

<input type="radio" name="R1" value="V3">公墓基金投资门槛较低，对投资者没有太多的的资质及投资金额要求<br>

<p>（2）你选择投资专户一对多基金的主要原因：（）</p>

<input type="radio" name="R1" value="V4">专户一对多基金管理规范，同公墓基金一样有比较强大的投研团队，且投资范围，投资比例较自由<br>

<input type="radio" name="R1" value="V5">专户一对多相对于公墓基金有更强的针对性，可以更好的满足投资者要求<br>

<p>（3）你希望获得哪方面的讯息？（多选题）</p>

<input type="checkbox" name="C1" value="ON">产品设计理念<br>

<input type="checkbox" name="C1" value="ON">基金经理介绍<br>

<p><b><font size="5"><div style="background:yellow">如果你获得抽奖机会，请留下如下信息</div></font></b></p>

</form>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

怎么用html5实现抽奖效果