前端开发者| 前端开发 新技术 |
| web前端开发技术展望 |
| 前端开发技术年度总结 |
这个主要是练习CANVAS绘图。随便做了一个抽奖的效果。
已知有一个小BUG，当指针指在两个扇形之间的线上时，会有一点判断不准确。{:1_502:}
【我只是一个自学中的小菜鸟，未经系统性的正规学习，本作品为本人练之作，如有不规范之处或奇怪的BUG，还请前辈们指点！】
代码片段 1
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>抽奖转盘</title>
<script
type=”text/javascript”
></script>
<style>
#wrap {
height: 100%;
width: 500px;
position: relative;
}
#center_but {
width: 50px;
height: 50px;
border-radius: 25px;
background: #000000;
position: absolute;
top: 225px;
left: 225px;
z-index: 200;
}
#pointer_box {
width: 300px;
height: 300px;
border-radius: 150px;
border: 1px solid white;
position: absolute;
top: 100px;
left: 100px;
transition: all 3s ease-in-out;
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
}
#start {
width: 100px;
height: 50px;
background: black;
font-family: ‘微软雅黑’;
font-size: 15px;
line-height: 50px;
text-align: center;
color: white;
cursor: pointer;
}
#prize_box {
width: 100%;
height: 1%;
background: rgba(229, 216, 216, 0.6);
position: absolute;
top: 0px;
left: 0px;
z-index: 999;
display: none;
transition: all 1s;
-webkit-transition: all 2s;
-moz-transition: all 2s;
}
#prize_wrap {
width: 300px;
height: 200px;
background: salmon;
border: 5px saddlebrown solid;
border-radius: 10px;
margin: 150px auto;
}
#text {
width: 100%;
height: 140px;
display: block;
font-family: ‘微软雅黑’;
font-size: 20px;
line-height: 140px;
color: white;
text-align: center;
}
#text b {
font-weight: bolder;
font-size: 25px;
color: seagreen;
}
#close_but {
width: 80px;
height: 50px;
background: skyblue;
border: 3px saddlebrown solid;
border-radius: 10px;
margin: 0 auto;
font-family: ‘微软雅黑’;
font-size: 15px;
font-weight: bold;
line-height: 50px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id=”wrap”>
<div id=”center_but”></div>
<div id=”pointer_box”>
<canvas id=”myPointer” width=”300px” height=”300px”></canvas>
</div>
<canvas id=”myCanvas” width=”500px” height=”500px”></canvas>
<div id=”prize_box”>
<div id=”prize_wrap”>
<span id=”text”>恭喜您获得了<b>二等奖</b></span>
<div id=”close_but”>关闭</div>
</div>
</div>
</div>
<div id=”start”>开始</div>
</body>
<script>
var color = [
‘#993333’,
‘#CC9966’,
‘#003300’,
‘#FF0033’,
‘#333399’,
‘#CCCC00’,
‘#CC0033’,
‘#003399’,
‘#999933’,
‘#99CC00’,
]
var c = document.getElementById(‘myCanvas’)
var cxt = c.getContext(‘2d’)
for (var i = 0; i < 10; i++) {
var ii = (i * 0.2).toFixed(1)
var iii = (i + 1) * (0.2).toFixed(1)
cxt.beginPath()
cxt.arc(250, 250, 250, Math.PI * ii, Math.PI * iii)
cxt.lineTo(250, 250)
cxt.closePath()
cxt.fillStyle = color[i]
cxt.fill()
}
var p = document.getElementById(‘myPointer’)
var p_cxt = p.getContext(‘2d’)
p_cxt.beginPath()
p_cxt.moveTo(150, 130)
p_cxt.lineTo(300, 150)
p_cxt.lineTo(150, 170)
p_cxt.closePath()
p_cxt.fill()
$(document).ready(function() {
var s = 0
var a = 0
$(‘#start’).click(function() {
s += parseInt(Math.random() * (360 – 100 + 1) + 100)
a = s + s * 15
$(‘#pointer_box’).css(‘transform’, ‘rotate(‘ + a + ‘deg)’)
setTimeout(prize, 3000)
})
e = [
‘0’,
‘0.1’,
‘0.2’,
‘0.3’,
‘0.4’,
‘0.5’,
‘0.6’,
‘0.7’,
‘0.8’,
‘0.9’,
‘1’,
]
h = [
‘特等奖’,
‘二等奖’,
‘三等奖’,
‘四等奖’,
‘五等奖’,
‘六等奖’,
‘七等奖’,
‘八等奖’,
‘九等奖’,
‘安慰奖’,
]
var j = 0
function prize() {
var b = a / 360
var c = b – parseInt(a / 360)
for (var f = 0; f < 11; f++) {
var g = e[f]
if (c < g) {
j = f – 1
open_prize()
break
}
}
}
function open_prize() {
$(‘#prize_box’).css({ display: ‘block’, height: ‘100%’ })
$(‘#text b’).html(h[j])
}
$(‘#close_but’).click(function() {
$(‘#prize_box’).css({ display: ‘none’, height: ‘0%’ })
})
})
</script>
</html>
| 前端技术开发的汽车比赛小游戏 |
| web前端开发技术聂常红 |
| 目前前端开发用到的技术 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册