                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

为什么代码一样，效果完全不一样呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");

            canvas.width = 1000;
            canvas.height = 700;

            var context = canvas.getContext("2d");

            context.fillStyle = "black";
            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 a = Math.random() * 360;
                drawStar(context, x, y, r, r/2.0, a);
            }

            function drawStar(cxt, x, y, outerR, innerR, rot){
                for (var 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.lineWidth = 3;
                cxt.fillStyle = "#fb3";
                cxt.strokeStyle = "#fd5";

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

        }

    </script>
</head>
<body>
<canvas id="canvas" style="margin: 50px auto ;display: block; border:1px solid black;"></canvas>
</body>
</html>