<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; }