前端开发者| 求前端游戏开发书籍 |
| 游戏开发的前端后端 |
| 前端开发游戏制作 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>加载圆</title>
<style type=”text/css”>
canvas {
border: 3px solid transparent;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<canvas id=”myCanvas” width=”600″ height=”600″></canvas>
</body>
<script type=”text/javascript”>
var canvas = document.getElementById(‘myCanvas’)
var canvasObj = canvas.getContext(‘2d’)
var deg = 90
function draw() {
canvasObj.clearRect(0, 0, canvas.width, canvas.height)
deg++
canvasObj.beginPath()
canvasObj.arc(300, 300, 200, 0, Math.PI * 2, false)
canvasObj.fillStyle = ‘#ddd’
canvasObj.fill()
canvasObj.beginPath()
canvasObj.arc(300, 300, 150, 0, Math.PI * 2, false)
canvasObj.shadowBlur = 10
canvasObj.shadowColor = ‘black’
canvasObj.fillStyle = ‘#eee’
canvasObj.fill()
canvasObj.beginPath()
canvasObj.arc(
300,
300,
160,
(-Math.PI / 180) * 90,
(-Math.PI / 180) * deg,
true,
)
canvasObj.lineWidth = 20
var linearG = canvasObj.createLinearGradient(300, 120, 300, 470)
linearG.addColorStop(0, ‘deepskyblue’)
linearG.addColorStop(1, ‘purple’)
canvasObj.strokeStyle = linearG
canvasObj.stroke()
canvasObj.textAlign = ‘center’
canvasObj.fillStyle = ‘greenyellow’
canvasObj.font = ’80px serif’
var str = Math.floor(((deg – 90) / 360) * 100) + ‘%’
canvasObj.fillText(str, 300, 320)
if (deg == 450) {
clearInterval(timer)
}
}
var timer = setInterval(draw, 20)
</script>
</html>
| 前端格斗游戏开发 |
| 广州4399游戏前端开发 |
| 游戏开发转web前端 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册