<style>
body {
background: black;
text-align: center;
}
#cans {
background: white;
}
</style>
<script>
window.onload=function(){
let OC=document.getElementById("cans");
let ctx=OC.getContext("2d");
ctx.arc(600,400,200,0,360,false);//一个大圆（起点坐标，起点坐标，半径，起始弧度，结束弧度，是否逆时针）逆时针为true，顺时针false
ctx.stroke();//描边
ctx.beginPath();//防止之前画好的部分受后面画的影响
ctx.arc(500,330,20,0,360,false);//左眼睛
ctx.stroke();//描边
ctx.beginPath();//防止之前画好的部分受后面画的影响
ctx.arc(700,330,20,0,360,false);//右眼睛
ctx.stroke();//描边
ctx.beginPath(); //防止之前画好的部分受后面画的影响
ctx.arc(600,430,100,(120-90)*Math.PI/180,(240-90)*Math.PI/180,false);//嘴巴，画弧线，弧度=度数-90
ctx.stroke();//描边
}
</script>
<body>
<input type="color" id="c1"><br />
<canvas id="cans" height="800" width="1200">该浏览器不支持canvas元素操作,请更新浏览器</canvas>
</body>
效果如下：