6. painting snowflakes in the sky with canvas 1

Time:2020-3-23

Attachment: drawing the flying snowflakes 2 with canvas
Drawing flying snowflakes with canvas 3

Effect preview: https://codepen.io/andy-js/pen/ojpzpde
It is recommended that you right-click a new label or window to open a preview

Today, I saw a beautiful snowflake drawn with pure CSS published by Mr. comehope
It’s a whim. I drew a picture with canvas.

1. First, we create a canvas and black the background
After mapping the 00 coordinate to the middle, you can draw six simple trunk lines and top circles by rotating the canvas as mentioned before.

<canvas class="snowflake" id="c1" width="600" height="600">  
<script>
var oC1=document.getElementById('c1'),
    ctx = oC1.getContext("2d");
var w=oC1.offsetWidth,
    radius = w / 2;;

ctx.fillStyle="#000";
Ctx.fillrect (0,0, W, w); // black background
CTX. Translate (radius, radius); // remap the (0,0) position on the canvas to the middle of the canvas   

var lineWidth=parseInt(w/60),
    Lineheight = radius * 0.8; // width and length of trunk line

ctx.lineWidth=lineWidth;
ctx.strokeStyle='#fff';
ctx.fillStyle="#fff";

for(var i=0;i<6;i++){
    CTX. Linecap = "round"; // adds a round cap to each end of the line.

    ctx.fillStyle="#fff";
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,-lineHeight);
    ctx.stroke();
    

    //Draw top circle
    ctx.beginPath();
    ctx.arc(0,-lineHeight,lineWidth*1.5,0,Math.PI*2,true);
    ctx.fill();

    CTX. Rotate (math. Pi / 3); // rotate the canvas
}
</script>

6. painting snowflakes in the sky with canvas 1

  1. At this time, we should draw branch lines on each trunk.
    In the same way as before, the position is calculated before rotation

Post full code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > Andy JS: draw a beautiful snowflake with canvas < / Title >
    <style>
    *{margin:0;padding:0}
    #c1{margin:20px auto;display: block;}

    /* .snowflake {
     animation: round 10s linear infinite;
    }

    @keyframes round {
        to {
            transform: rotate(1turn);
        }
    } */
    </style>
</head>
<body>
<canvas class="snowflake" id="c1" width="600" height="600">  
<script>
var oC1=document.getElementById('c1'),
    ctx = oC1.getContext("2d");
var w=oC1.offsetWidth,
    radius = w / 2;;

ctx.fillStyle="#000";
Ctx.fillrect (0,0, W, w); // black background
CTX. Translate (radius, radius); // remap the (0,0) position on the canvas to the middle of the canvas   

var lineWidth=parseInt(w/60),
    Lineheight = radius * 0.8; // width and length of trunk line

ctx.lineWidth=lineWidth;
ctx.strokeStyle='#fff';
ctx.fillStyle="#fff";

for(var i=0;i<6;i++){
    CTX. Linecap = "round"; // adds a round cap to each end of the line.

    ctx.fillStyle="#fff";
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,-lineHeight);
    ctx.stroke();
    

    //Draw top circle
    ctx.beginPath();
    ctx.arc(0,-lineHeight,lineWidth*1.5,0,Math.PI*2,true);
    ctx.fill();

    
    // draw a branch line.
    branch();
    
    //It's better to mend a circle
    Var xy = getxy (37, lineheight * 0.13); // 37 degree and length are tested by effect
    ctx.beginPath();
    CTX. Arc (x y. X, XY. Y-8, linewidth * 0.8,0, math. Pi * 2, true); // the radius of the circle is also tested
    ctx.fill();

    // rotation
    ctx.rotate(Math.PI/3);
};

function branch(){
    var start=-10,    
        Gap = parseInt ((lineheight-20) / 4), // spacing of each branch
        spot;

    var heightArr=[ lineHeight*0.12,lineHeight*0.12,lineHeight*.2,lineHeight*0.3 ];
    for(var i=0;i<4;i++){
        CTX. Linecap = I = = 0? "Square": "round"; // add a round cap to each end of the line.
        spot=getXY(45,heightArr[i]); 
        ctx.beginPath();
        ctx.moveTo(0,start);
        ctx.lineTo(spot.x, start+spot.y );
        ctx.stroke();
       
        ctx.beginPath();
        ctx.moveTo(0,start);
        ctx.lineTo(-(spot.x), start+spot.y );
        ctx.stroke();

        start-=gap;
    };
};


Function getxy (angle, radius) {// get the XY coordinate through the sine cosine area 
    return {
        x:Math.sin((180-angle)*Math.PI/180)*radius,
        y:Math.cos((180-angle)*Math.PI/180)*radius
    }
};
</script>
</body>
</html>

To rotate, just turn on the animation in CSS.
6. painting snowflakes in the sky with canvas 1

In the next article, I plan to encapsulate the JS method to draw a snowflake effect flying all over the sky.