前端开发用Canvas绘制星空流星图

java前端开发彩票源码
web前端开发和java后端开发
java前端开发的简历模板下载

html 代码

<!DOCTYPE html>
    <head>
        <title>starry sky</title>
        <meta charset=”gbk” />
        <meta name=”Author” content=”̶aoliann” />
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
                font-family: ‘Microsoft yahei’;
            }
            a {
                text-decoration: none;
            }
            a img {
                display: block;
                border: none;
            }
            li {
                list-style: none;
            }
            #canvas {
                background: #000;
                display: block;
            }
        </style>
    </head>
    <body>
        <canvas id=”canvas”></canvas>
        <script type=”text/javascript”>
            var can = document.getElementById(‘canvas’)
            var cxt = can.getContext(‘2d’)
            var w = (can.width = window.innerWidth)
            var h = (can.height = window.innerHeight)
            var num = 200
            var data = []
            var move = {}
            var liuXY = []
            var k = -1
            var range = Math.atan(k)
            var length = 200
            for (var i = 0; i < num; i++) {
                data[i] = {
                    x: Math.random() * w,
                    y: Math.random() * h,
                    r: Math.random() * 8 + 3,
                }
                Cricle(data[i].x, data[i].y, data[i].r)
            }
            !(function draw() {
                cxt.clearRect(0, 0, w, h)
                for (var i = 0; i < num; i++) {
                    data[i].r += Math.random() * 2 – 1
                    data[i].r = Math.max(0, data[i].r)
                    data[i].r = Math.min(12, data[i].r)
                    Cricle(data[i].x, data[i].y, data[i].r)
                }
                if (liuXY.length) {
                    for (var i in liuXY) {
                        liuXY[i].cX -= 10
                        liuX(liuXY[i].cX, liuXY[i].y, liuXY[i].x)
                        if (
                            liuXY[i].cX < 0 ||
                            getY(liuXY[i].cX, liuXY[i].y, liuXY[i].x) > h
                        ) {
                            liuXY.splice(i, 1)
                        }
                    }
                }
                if (Math.random() > 0.98) {
                    var a = Math.random() * (w – 400) + 400
                    liuXY.push({ x: a, y: 0, cX: a })
                }
                window.requestAnimationFrame(draw)
            })()
            function liuX(x, sX, sY) {
                cxt.save()
                var y = getY(x, sY, sX)
                var r = 15
                var rad = cxt.createRadialGradient(x, y, 0, x, y, r)
                rad.addColorStop(0, ‘rgba(255,255,255,0.8)’)
                rad.addColorStop(0.1, ‘rgba(255,255,255,0.8)’)
                rad.addColorStop(0.2, ‘rgba(255,255,255,0.08)’)
                rad.addColorStop(1, ‘rgba(255,255,255,0)’)
                cxt.fillStyle = rad
                cxt.beginPath()
                cxt.arc(x, y, r, 0, 2 * Math.PI, true)
                cxt.closePath()
                cxt.fill()
                cxt.restore()
                var wX = x + Math.cos(range) * length
                var wY = y + Math.sin(range) * length
                var x1 = x + 3
                var y1 = y
                var x2 = x
                var y2 = y – 3
                cxt.save()
                var rad2 = cxt.createRadialGradient(x, y, 0, x, y, length)
                rad2.addColorStop(0, ‘rgba(255,255,255,0.1)’)
                rad2.addColorStop(1, ‘rgba(255,255,255,0)’)
                cxt.fillStyle = rad2
                cxt.beginPath()
                cxt.moveTo(x1, y1)
                cxt.lineTo(x2, y2)
                cxt.lineTo(wX, wY)
                cxt.closePath()
                cxt.fill()
                cxt.restore()
            }
            function getY(x, startY, startX) {
                return k * x + startY – k * startX
            }
            //????
            function Cricle(x, y, r) {
                cxt.save()
                var rad = cxt.createRadialGradient(x, y, 0, x, y, r)
                rad.addColorStop(0, ‘rgba(255,255,255,0.8)’)
                rad.addColorStop(0.1, ‘rgba(255,255,255,0.8)’)
                rad.addColorStop(0.2, ‘rgba(255,255,255,0.08)’)
                rad.addColorStop(1, ‘rgba(255,255,255,0)’)
                cxt.fillStyle = rad
                cxt.beginPath()
                cxt.arc(x, y, r, 0, 2 * Math.PI, true)
                cxt.closePath()
                cxt.fill()
                cxt.restore()
            }
        </script>
    </body>
</html>
java 前端 开发 费时
java前端开发面试自我介绍
java怎么web前端开发
» 本文来自:前端开发者 » 《前端开发用Canvas绘制星空流星图》
» 本文链接地址:https://www.rokub.com/8159.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!