Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

How many stars in the sky, today we will draw, colorful stars.

draw

The container

All we need is a canvas canvas, as follows:

<canvas id="canvas" width="800" height="600">Your browser does not support it, please switch to Chrome</canvas>
Copy the code

Tip: your browser does not support this, please switch to Chrome, in order to check whether your browser supports Canvas.

style

Here we give the canvas a simple style and you can see its boundaries.

canvas{
    display: block;
    margin: 0 auto;
    border:1px solid red;
}
Copy the code

implementation

The point is, we need to manipulate JS to draw the stars.

<script>
var canvas=document.querySelector('#canvas');
canvas.width=800;
canvas.height=600;
var context=canvas.getContext('2d');

for(let i=0; i<100; i++){var x=random(1.801);
        var y=random(1.601);
        var R=random(6.21);
        fivepStar(x,y,R);

}
/ / a star
/*** * x is the abscess of the center of the pentagram * y is the ordinate of the center of the pentagram * R is the radius of the five points outside the pentagram * color Color of the pentagram default random color RGBA format If you need to define the color, Math.random() is changed to 1 * Angle, with (1,0) as the reference point. If you don't want random, you can change the parameter to numeric * Stroke Pentagram border defaults to false ***/ if not required
function fivepStar(x,y,R,color=true,angle=true,stroke=true){
        context.beginPath();/ /
        var k=Math.sin(18*Math.PI/180) /Math.sin(36*Math.PI/180);
                k=k.toFixed(2);
                r=k*R;// The relation between large circles and small circles


        /************** Pentagram deflection Angle **************/
        if (angle===true) {
                angle=random(0.361);// random deflection Angle of pentacle, with (1,0) as reference point
        }else{
                angle=angle;// Customize the Angle
        }


        /************** Pentagram color **************/
        if (color===true) {
                color='rgba('+random(0.256) +', '+random(0.256) +', '+random(0.256) +', '+Math.random()+') ';// Random color
        }else{
                color=color;// Custom colors
        }


        // The pentacle coordinates at ten
        for(let i=0; i<5; i++){ context.lineTo(R*Math.cos((72*i+angle)*Math.PI/180)+x,R*Math.sin((72*i+angle)*Math.PI/180)+y);
                context.lineTo(r*Math.cos((72*i+36+angle)*Math.PI/180)+x,r*Math.sin((72*i+36+angle)*Math.PI/180)+y)
        }
        // The starting point of the pentacle
        context.lineTo(R*Math.cos(angle*Math.PI/180)+x,R*Math.sin(angle*Math.PI/180)+y);
        context.fillStyle=color;
        context.fill();
        if (stroke) {
                context.stroke();
        }
        context.closePath();
        function random(m,n){
                var num=Math.max(m,n)-Math.min(m,n);
                return Math.round(Math.random()*num+Math.min(m,n)); }}function random(m,n){
                var num=Math.max(m,n)-Math.min(m,n);
                return Math.round(Math.random()*num+Math.min(m,n));
        }
</script>
Copy the code

conclusion

There’s always a star for you.