加载中的圆

求前端游戏开发书籍
游戏开发的前端后端
前端开发游戏制作

html 代码

<!DOCTYPE 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前端
» 本文来自:前端开发者 » 《加载中的圆》
» 本文链接地址:https://www.rokub.com/7036.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!