今日冬至,愿你笑靨如初
<!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>