给你一个笑脸
今日冬至，愿你笑靥如初
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<canvas id="mycanvas" width="800px" height="800px"></canvas>
<script>
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
//画圆
ctx.arc(500,300,200,0,2*Math.PI);
var grd=ctx.createRadialGradient(500,300,140,500,300,200);
grd.addColorStop(0,"#f0e720");
grd.addColorStop(1,"#ffca3c");
ctx.fillStyle=grd;
ctx.fill();
//画的笑脸
ctx.beginPath();
ctx.arc(500, 300, 140,0,2*Math.PI);
ctx.fillStyle="#7f2e00";
ctx.fill();
ctx.beginPath();
ctx.arc(500, 290,140, 0, 2*Math.PI);
ctx.fillStyle="#f0e720";
ctx.fill();
//左眉毛
ctx.beginPath();
ctx.moveTo(430,170);
ctx.quadraticCurveTo(390,90, 350, 150);
ctx.moveTo(350, 150);
ctx.quadraticCurveTo(386,120, 430,170);
ctx.fillStyle="#0c0c0e"
ctx.fill();
//右眉毛
ctx.beginPath();
ctx.moveTo(560, 170);
ctx.quadraticCurveTo(620, 90, 650, 150);
ctx.moveTo(650, 150);
ctx.quadraticCurveTo(616,120, 560, 170);
ctx.fillStyle="#0c0c0e"
ctx.fill();
//左眼睛
ctx.beginPath();
ctx.moveTo(310,210);
ctx.quadraticCurveTo(410,170, 470, 215);
ctx.quadraticCurveTo(469,225, 460, 235);
ctx.quadraticCurveTo(417, 200, 315, 230);
ctx.quadraticCurveTo(310, 225, 310,210);
ctx.lineWidth=3;
ctx.strokeStyle="#7b3f00"
ctx.stroke();
ctx.fillStyle="#fff";
ctx.fill();
//右眼睛
ctx.beginPath();
ctx.moveTo(520,205);
ctx.quadraticCurveTo(620, 170, 690, 212);
ctx.quadraticCurveTo(689, 222, 680, 232);
ctx.quadraticCurveTo(627, 200, 530, 227);
ctx.quadraticCurveTo(525,222, 520,205);
ctx.lineWidth=3;
ctx.strokeStyle="#7b3f00"
ctx.stroke();
ctx.fillStyle="#fff";
ctx.fill();
//眼珠
ctx.beginPath();
ctx.arc(340, 210, 14, 0,2*Math.PI)
ctx.fillStyle="#000";
ctx.fill();
ctx.beginPath();
ctx.arc(550, 210, 14, 0,2*Math.PI)
ctx.fillStyle="#000";
ctx.fill();
//画椭圆脸蛋
ctx.beginPath();
var grd1=ctx.createRadialGradient(395,250,24,395,250,12);
var grd2=ctx.createRadialGradient(600,250,24,395,250,12);
grd1.addColorStop(0,"#f5b201");
grd1.addColorStop(1,"#fc9900");
ctx.fillStyle=grd1;
ctx.shadowBlur=10;
ctx.shadowColor="#fe9b00";
grd2.addColorStop(0,"#f5b201");
grd2.addColorStop(1,"#fc9900");
ctx.fillStyle=grd2;
ctx.shadowBlur=10;
ctx.shadowColor="#fe9b00";
EllipseTwo(ctx,395,250,24,12);
EllipseTwo(ctx,600,250,24,12)
function EllipseTwo(context, x, y, a, b) {
context.save();
var r = (a > b) ? a : b;
var ratioX = a / r;
var ratioY = b / r;
context.scale(ratioX, ratioY);
context.beginPath();
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
context.closePath();
context.restore();
context.fill();
}
</script>
</body>
</html>
