6.用canvas繪製漫天飛舞的雪花1

時間 2020-01-07

標籤 canvas 繪製漫天飛舞雪花简体版

原文原文鏈接

附：用canvas繪製漫天飛舞的雪花2
用canvas繪製漫天飛舞的雪花3html

效果預覽：https://codepen.io/andy-js/pen/OJPzpdE
建議右鍵新標籤或窗口打開預覽canvas

今天看到 comehope老師發表的用純 CSS 繪製一朵美麗的雪花
心血來潮，即用canvas也畫了一個樣的。segmentfault

1.首先咱們建立一個canvas並將背景塗黑
將00座標映射到正中間後，經過之前講過的旋轉畫布的方法，能夠繪製出簡單的六個主幹線和頂端圓。動畫

<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);  //背景塗黑
ctx.translate(radius,radius);//從新映射畫布上的 (0,0) 位置  映射到畫布正中間   

var lineWidth=parseInt(w/60),
    lineHeight=radius*0.8;  //主幹線的寬度 長度

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

for(var i=0;i<6;i++){
    ctx.lineCap="round";//向線條的每一個末端添加圓形線帽。

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

    //畫頂端圓
    ctx.beginPath();
    ctx.arc(0,-lineHeight,lineWidth*1.5,0,Math.PI*2,true);
    ctx.fill();

    ctx.rotate(Math.PI/3);   //旋轉畫布
}
</script>

這個時候應該畫每一主幹上的支線。
以以前的方法同理，也是在旋轉以前計算好位置

貼出全代碼ui

<!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:用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);  //背景塗黑
ctx.translate(radius,radius);//從新映射畫布上的 (0,0) 位置  映射到畫布正中間   

var lineWidth=parseInt(w/60),
    lineHeight=radius*0.8;  //主幹線的寬度 長度

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

for(var i=0;i<6;i++){
    ctx.lineCap="round";//向線條的每一個末端添加圓形線帽。

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

    //畫頂端圓
    ctx.beginPath();
    ctx.arc(0,-lineHeight,lineWidth*1.5,0,Math.PI*2,true);
    ctx.fill();

    
    //畫支線
    branch();
    
    //補一個圓  更好看
    var xy=getXY(37,lineHeight*0.13);   //37度和長度是經過效果，試出來的
    ctx.beginPath();
    ctx.arc(xy.x,xy.y-8,lineWidth*0.8,0,Math.PI*2,true);  //圓的半徑也是試出來的
    ctx.fill();

    //旋轉
    ctx.rotate(Math.PI/3);
};

function branch(){
    var start=-10,    
        gap=parseInt( (lineHeight-20)  /4),   //每根分支的間距
        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";//向線條的每一個末端添加圓形線帽。
        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){      //經過正餘弦區取XY座標 
    return {
        x:Math.sin((180-angle)*Math.PI/180)*radius,
        y:Math.cos((180-angle)*Math.PI/180)*radius
    }
};
</script>
</body>
</html>

要旋轉，就將CSS中的動畫打開就便可。
spa

在下一篇文章中，我計劃封成JS方法，來繪製一個滿天飛舞的雪花效果。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。