怎么样用html做转盘抽奖软件

html-css018

怎么样用html做转盘抽奖软件,第1张

自己参考改吧

<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>

快手转盘功能在直播道具中，使用方法如下：

1、以华为荣耀8X为例，打开快手APP，进入软件主界面，如下图所示：

2、然后选择红色箭头所指的拍摄功能，如下图所示：

3、点击开始直播，即可进入直播页面。

4、点击菜单栏中的拼手气，进入抽奖转盘页面。

5、设置好抽奖转盘的礼物数量、项目等，点击完成设置即可。