Canvas放射线动画

前端开发基础教程
web前端开发面试视频教程

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>HTML5 Canvas放射线动画</title>
        <style>
            body {
                background: #000;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
            canvas {
                width: 45%;
                margin: 5% 30%;
            }
        </style>
    </head>
    <body>
        <canvas id=”canv” width=”600″ height=”600″></canvas>
        <script type=”text/javascript”>
            var c
            var $
            var w = 600
            var h = 600
            constant = 15
            var rad = 300
            var timeout = 0
            c = document.getElementById(‘canv’)
            $ = c.getContext(‘2d’)
            drawLines()
            function drawLines() {
                $.fillRect(0, 0, w, h)
                $.translate(w / 2, h / 2)
                for (var i = 0; i < 25; i++) {
                    for (var n = -45; n <= 45; n += constant) {
                        setTimeout(‘draw(‘ + n + ‘);’, 100 * timeout)
                        timeout++
                    }
                }
            }
            function draw(n) {
                $.beginPath()
                $.moveTo(0, rad)
                var radians = (Math.PI / 180) * n
                var x =
                    (rad * Math.sin(radians)) / Math.sin(Math.PI / 2 – radians)
                $.lineTo(x, 0)
                if (Math.abs(n) == 45) {
                    $.strokeStyle = rndColor()
                    $.lineWidth = 2
                } else if (n == 0) {
                    $.strokeStyle = ‘rgb(200,200,200)’
                    $.lineWidth = 0.5
                } else {
                    $.strokeStyle = ‘rgb(110,110,110)’
                    $.lineWidth = 0.5
                }
                $.stroke()
                $.rotate((Math.PI / 180) * 15)
            }
            function rndColor() {
                var r = (255 * Math.random()) | 0,
                    g = (255 * Math.random()) | 0,
                    b = (255 * Math.random()) | 0
                return ‘rgb(‘ + r + ‘,’ + g + ‘,’ + b + ‘)’
            }
        </script>
    </body>
</html>
前端开发面试视频教程
计算机前端开发视频教程下载
» 本文来自:前端开发者 » 《Canvas放射线动画》
» 本文链接地址:https://www.rokub.com/6934.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!