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

自己参考改吧

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

公司有50个人奖品有30个抽奖概率怎么弄开？第一步,微信抽奖活动制作并没有大家想象当中那么困难,因为现在的游戏h5模板特别多,可以满足很多商家的不同需求。我们需要先在举客宝平台或者举客宝公众号上注册一个账号,如果有账号的话,那么就直接登录进入后台就可以了。

第二步,进入到后台后,我们可以找到并点击【我要创建活动】板块,然后进入到【抽奖】的界面查找相关模板,然后就可以看到很多相关的抽奖类营销活动的模板,选择自己喜欢的那个模板进行编辑就好了,

第三步:挑选好自己中意的微信抽奖动模板后,我们就可以针对模板进行修改完善了,编辑活动名称、活动图片、活动说明、活动时间、中奖提示、分享增加次数、抽奖次数、中奖次数等

第四步:也就是设置微信抽奖活动奖品概率的地方,中奖概率填写数字即可所有奖项概率之和为100,单个奖项即为百分之多少,比如60%,也就是整个中奖概率加起来等于百分百,如果不想某个奖品被抽中,可以直接设置为0

第五步:根据自己的需求修改好活动模板后，就可以扫描左上角的【二维码】查看活动的页面了。如果没什么问题的话,通过复制活动链接,进入活动,为了方便粉丝参加抽奖活动,可以把链接绑定在公众号菜单,粉丝直接点击菜单参与抽奖,商家可以在后台查看粉丝中奖情况,还可以进行奖品核销。

---