HTML JS大转盘在手机浏览器上的显示问题

HTML JS大转盘在手机浏览器上的显示问题,第1张

一款JS+html5转盘抽奖代码网页特效,该特效代码基于html5 canvas技术实现,点击开始旋转按钮,转盘就会快速旋转,停止旋转后,所在区域就是中奖项目。奖项可以自定义。请用支持HTML5+CSS3主流浏览器预览效果。(兼容测试:FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)

使用方法:

1、调用CSS样式:

<link rel="stylesheet" type="text/css" href="css/style.css" />

2、添加HTML代码:

将<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。

自己参考改吧

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

直接设置就行。

点击开始旋转按钮,转盘就会快速旋转,停止旋转后,所在区域就是中奖项目,选择快速分区,分区为5个。

也直接套用模板,套用分区好的模板。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7567473.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-07
下一篇 2023-04-07

发表评论

登录后才能评论

评论列表(0条)

保存