前端开发者| 前端 开发 区别 |
| 前端美工和前端开发的区别 |
| 前端开发者个后端开发者的区别 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>刮刮乐</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
#crad {
width: 320px;
height: 568px;
margin: 0 auto;
background: url(http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=3b7811d6e94f72c4b3bd4e13a2e6fb5d)
no-repeat;
background-size: 320px 568px;
position: relative;
}
#myCanvas {
/*border: 3px solid gray;*/
position: absolute;
left: 30px;
top: 192px;
}
#p1 {
position: absolute;
left: 30px;
top: 192px;
width: 261px;
height: 131px;
font-size: 40px;
color: deepskyblue;
line-height: 131px;
text-align: center;
}
</style>
</head>
<body>
<div id=”crad”>
<p id=”p1″>一等奖</p>
<canvas id=”myCanvas” width=”261″ height=”131″></canvas>
</div>
</body>
<script type=”text/javascript”>
function randomFun(m, n) {
return Math.floor(Math.random() * (n – m + 1) + m)
}
var arr = [‘一等奖’, ‘二等奖’, ‘三等奖’, ‘谢谢惠顾’]
//随机奖对应的下标
var index = randomFun(0, arr.length – 1)
//显示奖项
var p1 = document.getElementById(‘p1’)
p1.innerHTML = arr[index]
var cradObj = document.getElementById(‘crad’)
var pObj = document.getElementById(‘p1’)
var canvas = document.getElementById(‘myCanvas’)
var canvasObj = canvas.getContext(‘2d’)
canvasObj.fillStyle = ‘gray’
canvasObj.fillRect(0, 0, canvas.width, canvas.height)
canvas.onmousedown = function() {
canvas.onmousemove = function(e) {
var event1 = window.event || e
var X = event1.offsetX
var Y = event1.offsetY
canvasObj.globalCompositeOperation = ‘destination-out’
canvasObj.beginPath()
canvasObj.arc(X, Y, 20, 0, Math.PI * 2, false)
canvasObj.fill()
var imgageDate = canvasObj.getImageData(
0,
0,
canvas.width,
canvas.height,
)
var colors = imgageDate.data
var count = 0
for (var i = 0; i < colors.length; i += 4) {
if (colors[i + 3] == 0) {
count++
}
}
if (count > (colors.length / 4) * 0.7) {
canvasObj.clearRect(0, 0, canvas.width, canvas.height)
}
}
//添加鼠标松开事件
canvas.onmouseup = function() {
canvas.onmousemove = null
}
}
</script>
</html>
| 前端开发和测试的区别 |
| 前端开发和.net的区别 |
| 前端开发用px和rem的区别 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册