前端开发canvas太阳系

性能测试和前端开发哪个更简单
前端开发和后端哪个热门
web前端开发属于哪个

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>solar system</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,
            body {
                width: 100%;
            }
            #canvas {
                width: 100%;
                height: 100%;
                background: black;
                display: block;
                /*去掉canvas作为行内元素默认垂直方式而产生的下边空白间距*/
            }
        </style>
    </head>
    <body>
        <canvas id=”canvas”>your browser do not support canvas</canvas>
        <script>
            var canvas = document.getElementById(‘canvas’)
            var cxt = canvas.getContext(‘2d’)
            var centerX = 0,
                cneterY = 0
            var time = 0
            centerX = window.innerWidth / 2
            cneterY = window.innerHeight / 2
            canvas.width = window.innerWidth
            canvas.height = window.innerHeight
            window.onresize = function() {
                canvas.width = window.innerWidth
                canvas.height = window.innerHeight
                // 获取浏览器窗口的中心坐标
                centerX = window.innerWidth / 2
                cneterY = window.innerHeight / 2
                // console.log(“W:”+centerX + “H:”+cneterY);
            }
            function draw() {
                cxt.clearRect(0, 0, 10000, 10000)
                cxt.strokeStyle = ‘#fff’
                //画轨道,因其是相对太阳静止的,故与行星区分开来画
                function drawTrack() {
                    for (var i = 1; i < 9; i++) {
                        cxt.beginPath()
                        cxt.arc(centerX, cneterY, 50 * i, 0, 360, false)
                        cxt.closePath()
                        cxt.stroke()
                    }
                }
                drawTrack()
                function Planet(x, y, radius, cycle, inColor, outColor) {
                    this.x = x
                    this.y = y
                    this.radius = radius
                    this.cycle = cycle
                    this.inColor = inColor
                    this.outColor = outColor
                    this.draw = function() {
                        cxt.save()
                        cxt.translate(centerX, cneterY)
                        cxt.rotate(
                            (((time * 360) / this.cycle) * Math.PI) / 200,
                        )
                        cxt.beginPath()
                        cxt.arc(this.x, this.y, this.radius, 0, 360, false)
                        cxt.closePath()
                        var sunColor = cxt.createRadialGradient(
                            this.x,
                            this.y,
                            0,
                            this.x,
                            this.y,
                            20,
                        )
                        sunColor.addColorStop(0, this.inColor)
                        sunColor.addColorStop(1, this.outColor)
                        cxt.fillStyle = sunColor
                        cxt.fill()
                        cxt.restore()
                        time++
                    }
                }
                var sun = new Planet(0, 0, 20, 0, ‘#f00’, ‘#f90’)
                sun.draw()
                var Mercury = new Planet(-50, 0, 10, 288, ‘#A69697’, ‘#5C3E40’)
                Mercury.draw()
                var Venus = new Planet(-100, 0, 10, 505, ‘#C4BBAC’, ‘#1F1315’)
                Venus.draw()
                var Earth = new Planet(-150, 0, 10, 565, ‘#78B1E8’, ‘#050C12’)
                Earth.draw()
                var Mars = new Planet(-200, 0, 10, 687, ‘#CEC9B6’, ‘#76422D’)
                Mars.draw()
                var Jupiter = new Planet(
                    -250,
                    0,
                    10,
                    4333,
                    ‘#C0A48E’,
                    ‘#322222’,
                )
                Jupiter.draw()
                var Saturn = new Planet(
                    -300,
                    0,
                    10,
                    10760,
                    ‘#F7F9E3’,
                    ‘#5C4533’,
                )
                Saturn.draw()
                var Uranus = new Planet(
                    -350,
                    0,
                    10,
                    30099,
                    ‘#A7E1E5’,
                    ‘#19243A’,
                )
                Uranus.draw()
                var Neptune = new Planet(
                    -400,
                    0,
                    10,
                    165 * 320,
                    ‘#0661B2’,
                    ‘#1E3B73’,
                )
                Neptune.draw()
            }
            setInterval(draw, 10)
        </script>
    </body>
</html>
前端开发去哪个城市
web前端开发哪个专业好
前端开发哪个编译器好用
» 本文来自:前端开发者 » 《前端开发canvas太阳系》
» 本文链接地址:https://www.rokub.com/8187.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!