我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
详细说明
什么是canvas呢，canvas是h5的一个标签元素，用于图形绘制，通过脚本来完成。canvas只是一个图形容器，必须通过使用脚本来绘制图形。canvas可以绘制路径、盒、圆、字符以及添加图像。
首先创建一个画布，并设置画布的宽度和高度。
<canvas width='600' height='400' id='canvas'></canvas>
可以根据id找到画布，创建 context 对象，后面才可以在这个画布绘制图形。
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
绘制圆脸，arc方法设置圆的中心x坐标轴、中心y坐标轴、圆的半径、起始角（开始的弧度）、结束角（结束弧度）；绘制成功后再填充颜色；
context.arc(300, 200, 150, 0, 2*Math.PI);
context.stroke();
context.fillStyle = "#fccb41";
context.fill();
绘制眼睛，绘制眼睛就比较多了，两个椭圆形的白色眼珠子，两个黑色的眼珠子，白色眼珠子一定要先绘制，否则白色眼珠会覆盖住黑色眼珠。每次绘制一个都需要重新开始绘制，否则会把几个图形都连接在一起。
context.beginPath()
context.ellipse(240, 160,22,26,0,0,Math.PI*2);
context.fillStyle="#fff";
context.strokeStyle="#000";
context.fill();
context.stroke();
context.beginPath()
context.ellipse(360, 160,22,26,0,0,Math.PI*2);
context.fillStyle="#fff";
context.strokeStyle="#000";
context.fill();
context.stroke();
context.beginPath();
context.arc(240, 164, 20, 0, 2*Math.PI);
context.stroke();
context.fillStyle = "#000";
context.fill();
context.beginPath();
context.arc(360, 164, 20, 0, 2*Math.PI);
context.stroke();
context.fillStyle = "#000";
context.fill();
最后，再绘制嘴巴，这个就比较简单了，绘制一个圆弧就行了，角度和长度可以自己慢慢调试，调到自己喜欢的角度就可以。圆弧的圆心在上面就是笑脸，当圆弧的圆心在下面就是一个哭脸。
context.beginPath();
context.arc(300, 150, 120, 50/180*Math.PI, 130/180*Math.PI);
context.stroke();
