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

5分给你个程序。。。

自己参考改吧

<input type="button" value="开始旋转" onclick="spin()" style="float: left" />

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<canvas id="wheelcanvas" width="500" height="500"></canvas>

<script type="application/javascript">

var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",

"#2E2C75", "#673A7E", "#CC0071", "#F80120",

"#F35B20", "#FB9A00", "#FFCC00", "#FEF200"]

var restaraunts = ["北京", "上海", "天津", "南京",

"杭州", "深圳", "武汉", "济南",

"重庆", "大连", "合肥", "郑洲"]

var startAngle = 0

var arc = Math.PI / 6

var spinTimeout = null

var spinArcStart = 10

var spinTime = 0

var spinTimeTotal = 0

var ctx

function draw() {

drawRouletteWheel()

}

function drawRouletteWheel() {

var canvas = document.getElementById("wheelcanvas")

if (canvas.getContext) {

var outsideRadius = 200

var textRadius = 160

var insideRadius = 125

ctx = canvas.getContext("2d")

ctx.clearRect(0,0,500,500)

ctx.strokeStyle = "black"

ctx.lineWidth = 2

ctx.font = 'bold 12px sans-serif'

for(var i = 0i <12i++) {

var angle = startAngle + i * arc

ctx.fillStyle = colors[i]

ctx.beginPath()

ctx.arc(250, 250, outsideRadius, angle, angle + arc, false)

ctx.arc(250, 250, insideRadius, angle + arc, angle, true)

ctx.stroke()

ctx.fill()

ctx.save()

ctx.shadowOffsetX = -1

ctx.shadowOffsetY = -1

ctx.shadowBlur= 0

ctx.shadowColor = "rgb(220,220,220)"

ctx.fillStyle = "black"

ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius)

ctx.rotate(angle + arc / 2 + Math.PI / 2)

var text = restaraunts[i]

ctx.fillText(text, -ctx.measureText(text).width / 2, 0)

ctx.restore()

}

//Arrow

ctx.fillStyle = "black"

ctx.beginPath()

ctx.moveTo(250 - 4, 250 - (outsideRadius + 5))

ctx.lineTo(250 + 4, 250 - (outsideRadius + 5))

ctx.lineTo(250 + 4, 250 - (outsideRadius - 5))

ctx.lineTo(250 + 9, 250 - (outsideRadius - 5))

ctx.lineTo(250 + 0, 250 - (outsideRadius - 13))

ctx.lineTo(250 - 9, 250 - (outsideRadius - 5))

ctx.lineTo(250 - 4, 250 - (outsideRadius - 5))

ctx.lineTo(250 - 4, 250 - (outsideRadius + 5))

ctx.fill()

}

}

function spin() {

spinAngleStart = Math.random() * 10 + 10

spinTime = 0

spinTimeTotal = Math.random() * 3 + 4 * 1000

rotateWheel()

}

function rotateWheel() {

spinTime += 30

if(spinTime >= spinTimeTotal) {

stopRotateWheel()

return

}

var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal)

startAngle += (spinAngle * Math.PI / 180)

drawRouletteWheel()

spinTimeout = setTimeout('rotateWheel()', 30)

}

function stopRotateWheel() {

clearTimeout(spinTimeout)

var degrees = startAngle * 180 / Math.PI + 90

var arcd = arc * 180 / Math.PI

var index = Math.floor((360 - degrees % 360) / arcd)

ctx.save()

ctx.font = 'bold 30px sans-serif'

var text = restaraunts[index]

ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10)

ctx.restore()

}

function easeOut(t, b, c, d) {

var ts = (t/=d)*t

var tc = ts*t

return b+c*(tc + -3*ts + 3*t)

}

draw()

</script>

---