canvas笔记-画一片星空

2020-06-02 17:02:24 阅读：321 来源： 互联网

标签：canvas cxt 星空笔记 let context rot Math

程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

<script>
    window.onload = function() {

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

        context.fillStyle = "black";
        context.fillRect(0, 0, canvas.width, canvas.height);

        for(let i = 0; i < 200; i++){

            let r = Math.random() * 10 + 10;
            let x = Math.random() * canvas.width;
            let y = Math.random() * canvas.height;
            let a = Math.random() * 360;
            drawStar(context, x, y, r, r / 2.0, a);
        }
    }

    function drawStar(cxt, x, y, outerR, innerR, rot){

        cxt.beginPath();
        for(let i = 0; i < 5; i++){

            cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * outerR + x,
                -Math.sin((18 + i * 72- rot) / 180 * Math.PI) * outerR + y);

            cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * innerR + x,
                -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * innerR + y);
        }

        cxt.closePath();

        cxt.fillStyle = "#fb3";
        cxt.strokeStyle = "#fd5";
        cxt.lineWidth = 3;
        cxt.lineJoin = "round";

        cxt.fill();
        cxt.stroke();
    }

</script>

</body>
</html>

标签：canvas,cxt,星空,笔记,let,context,rot,Math
来源： https://blog.csdn.net/qq78442761/article/details/106459553

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas笔记-画一片星空