首页 > 编程札记 > 编程

笑脸图

阅读：评论：0

笑脸图

给你一个笑脸

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

var c&#ElementById("mycanvas");

var ctx&#Context("2d");

ctx.beginPath();

//画圆

ctx.arc(500,300,200,0,2*Math.PI);

var grd&#ateRadialGradient(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();

veTo(430,170);

ctx.quadraticCurveTo(390,90, 350, 150);

veTo(350, 150);

ctx.quadraticCurveTo(386,120, 430,170);

ctx.fillStyle="#0c0c0e"

ctx.fill();

//右眉毛

ctx.beginPath();

veTo(560, 170);

ctx.quadraticCurveTo(620, 90, 650, 150);

veTo(650, 150);

ctx.quadraticCurveTo(616,120, 560, 170);

ctx.fillStyle="#0c0c0e"

ctx.fill();

//左眼睛

ctx.beginPath();

veTo(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();

veTo(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&#ateRadialGradient(395,250,24,395,250,12);

var grd2&#ateRadialGradient(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();

store();

context.fill();

}

</script>

</body>

</html>

WEB前端学习交流群21 598399936

转载于:.html

本文发布于:2024-02-02 00:25:53，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170681027540182.html

上一篇：Java显示基本的图形笑脸

下一篇：法国2018年经济增速低于预期官员：仍看好2019

标签：笑脸

留言与评论（共有 0 条评论）