笑脸图

最新推荐文章于 2022-10-25 15:44:06 发布

22guanerye123

最新推荐文章于 2022-10-25 15:44:06 发布

阅读量222

点赞数

给你一个笑脸

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

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>

WEB前端学习交流群21 598399936