canvas 纯js 绘制笑脸

<div class="flex-column">
<canvas id="canvasSmile" width="60" height="60" style="margin-bottom: 10px"></canvas>
<p>恭喜！完成注册</p>

　　

扁平笑脸。一半一半 fillStyle 不同；先右后左

var canvasSmile = document.getElementById("canvasSmile");
    var smile = canvasSmile.getContext("2d");
    smile.beginPath();
    smile.arc(30,30,30,1.5*Math.PI,0.5*Math.PI);
    smile.fillStyle = "#f8db5a";
    smile.fill();

    smile.beginPath();
    smile.arc(30,30,30,0.5*Math.PI,1.5*Math.PI);
    smile.fillStyle = "#fde58b";
    smile.fill();


    smile.beginPath();
    smile.lineWidth = 4;
    smile.strokeStyle = "#635c35";
    smile.arc(30,30,18,30*Math.PI/180,150*Math.PI/180);
    smile.stroke();

    smile.beginPath();
    smile.fillStyle = "#635c35";
    smile.arc(14,26,4,0, 2*Math.PI);
    smile.fill();

    smile.beginPath();
    smile.fillStyle = "#635c35";
    smile.arc(46,26,4,0, 2*Math.PI);
    smile.fill();

　　

.flex-column 垂直居中。items 排列格式是从上往下按列排布

.flex-column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}