星空代码

最新推荐文章于 2024-03-29 13:08:40 发布

Cathe_littletiger

最新推荐文章于 2024-03-29 13:08:40 发布

阅读量1.2w

点赞数 1

分类专栏： code 文章标签：星空代码

本文链接：https://blog.csdn.net/Cathe_littletiger/article/details/50010659

版权

code 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>满天星</title>
    <title>曲线</title>
    <style>
        body {

        }

        #canvas {
            border: 1px solid #aaaaaa;
            display: block;
            margin: 50px auto;
        }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
</div>

<script>
    window.onload = function () {

        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        var context = canvas.getContext("2d");

        var sky = context.createLinearGradient(0, 0, 0, canvas.height);
        sky.addColorStop(0.0, "#000");
        sky.addColorStop(1.0, "#035");
        context.fillStyle = sky;
        context.fillRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < 200; i++) {
            var R = Math.random() * 10 + 10;
            var x = Math.random() * canvas.width;
            var y = Math.random() * canvas.height;
            var rot = Math.random() * 360;





            drawStar(context, x, y, R/2.0, R, rot);


                          drawMoon(context, 200, 100, 200, 400, 1200, 400);

            context.lineWidth = 3;
            context.strokeStyle = "yellow";
            context.fillStyle = "yellow";
            context.stroke();
            context.fill();
        }
    };


    function drawStar(cxt, x, y, r, R, rot) {
        cxt.beginPath();
        for (var i = 0; i < 200; i++) {
            cxt.lineTo(
                    Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,
                    -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y
            );
            cxt.lineTo(
                    Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,
                    -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y
            );
        }

            cxt.closePath();

            cxt.lineWidth = 2;
            cxt.lineCap = "round";
            cxt.strokeStyle = "#FCFF7D";
            cxt.fillStyle = "yellow";
            cxt.fill();
            cxt.stroke();

    }

    function drawMoon(cxt, x1, y1, x2, y2 ,x3, y3) {
        cxt.beginPath();
        cxt.arc((x2 + x1) / 2, (y2 + y1) / 2, (y2 - y1) / 2, Math.PI * 0.5, Math.PI * 1.5, true);
        cxt.arcTo(x3, y3, x2, y2, (y2 - y1) / 2 / (x3 - x1) * dis(x1, y1, x3, y3));
        cxt.closePath();}

    function dis(x1, y1, x2, y2) {
        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));



    }


</script>
</body>
</html>

Cathe_littletiger

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
星空代码

html>html lang="zh">head> meta charset="UTF-8"> title>满天星title> title>曲线title> style> body { } #canvas { border: 1px solid #aaaaaa;
复制链接

扫一扫