问答详情
源自：4-1 画一片星空

为什么我的星星都在一坨？

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>


<body>

    <canvas id="star" ></canvas>

    <script>

        window.onload = function () {

            let canvas = document.getElementById('star');


            canvas.width = 800;

            canvas.height = 800;


            let context = canvas.getContext('2d');


            context.fillStyle = 'black';


            context.fillRect( 0,0,canvas.width,canvas.height);

            // frawStar(context,150,300,400,400,30);//调用五角星函数


            for(var i = 0; i < 20; i ++){


                var r = Math.random() * 10 + 10;


                var x = Math.random() * canvas.width/10;

                var y = Math.random() * canvas.height/10;

                var a = Math.random() * 360;


                console.log(r,x,y,a)


                frawStar(context , x , y , r , (r / 2.0) , a);//调用五角星函数

            }



            // context.lineWidth = 10;

            context.stroke();

        }

        //五角星的函数

        /* r 小圆半径，R大圆半径，x 偏移值x坐标，y 偏移值 y坐标，rot五角星旋转角度*/

        function frawStar(cxt, r, R, x, y, rot) {

            cxt.beginPath();

            for (var i = 0; i < 5; 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.fillStyle = '#fb3';

            //  cxt.fillStyle = '#fff';

            cxt.strokeStyle = '##fd5';

            cxt.lineWidth = 3;

            cxt.lineJoin = 'round';


            cxt.fill();


            cxt.stroke();

        }

    </script>

</body>


</html>


提问者：weixin_慕工程9554846 2023-03-07 21:21

个回答

  • slongzhang
    2023-05-07 22:48:30

     for(var i = 0; i < 20; i ++){
    var r = Math.random() * 10 + 10;
    var x = Math.random() * canvas.width/10; // 偏移量写成了10分之一
    var y = Math.random() * canvas.height/10; // 偏移量写成了10分之一
    var a = Math.random() * 360;
    console.log(r,x,y,a)
    frawStar(context , x , y , r , (r / 2.0) , a); // 参数位置写错了
    // 应该是frawStar(context ，内圆半径, 大圆半径, 偏移x , 偏移y , 旋转角度a);
}

    改成如下即可

    for(var i = 0; i < 20; i ++){
    var r = Math.random() * 10 + 10;
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var a = Math.random() * 360;
    console.log(r,x,y,a)
    frawStar(context , (r / 2.0), r, x , y  , a);//调用五角星函数
}


    2