纯 JS canvas 绘制滑稽表情图片

使用 javascript 画布画一个滑稽表情

这张图片是绘制后通过画布保存下来的，也是最终画出来的效果；实现思路较为简单，挨个画五官，按照思路去实现也还是麻烦，毕竟要不断调试很多遍，好在这里面的线条没那么复杂，曲线也比较均匀，最麻烦的是眼眶，由四条曲线组成。

//大脸
ctx.beginPath();
var face_gradient = ctx.createRadialGradient(230, 230, 100, 230, 230, 230);
face_gradient.addColorStop(0, "rgb(240,220,130)");
face_gradient.addColorStop(1, "rgb(240,170,80)");
ctx.fillStyle = face_gradient;
ctx.arc(230, 230, 230, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();

ctx.translate(-20, 55);

//左眉毛
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(100, 0);
ctx.bezierCurveTo(120, -30, 160, -30, 180, 0);
ctx.bezierCurveTo(160, -50, 120, -50, 100, 0);
ctx.closePath();
ctx.fill();

ctx.save();
ctx.translate(220, 0);

//右眉毛
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.bezierCurveTo(120, -30, 160, -30, 180, 0);
ctx.bezierCurveTo(160, -50, 120, -50, 100, 0);
ctx.closePath();
ctx.fill();

ctx.restore()

  //左眼，外边
ctx.beginPath();
ctx.fillStyle = "rgb(245,200,110)";
ctx.moveTo(45, 45);
ctx.quadraticCurveTo(95, 10, 210, 46);
ctx.quadraticCurveTo(230, 62, 205, 82);
ctx.quadraticCurveTo(95, 68, 50, 82);
ctx.quadraticCurveTo(20, 72, 45, 45);
ctx.closePath();
ctx.fill();
  //左眼，内边
ctx.beginPath();
ctx.fillStyle = "rgb(255,255,255)";
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(100, 20, 200, 50);
ctx.quadraticCurveTo(220, 62, 200, 75);
ctx.quadraticCurveTo(100, 62, 50, 75);
ctx.quadraticCurveTo(35, 68, 50, 50);
ctx.closePath();
ctx.fill();
  //左眼，眼珠
ctx.beginPath();
ctx.fillStyle = "rgb(100,40,0)";
ctx.arc(76, 54, 18, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();

ctx.save();
ctx.translate(240, 0);

  //右眼，外边
ctx.beginPath();
ctx.fillStyle = "rgb(245,200,110)";
ctx.moveTo(45, 45);
ctx.quadraticCurveTo(95, 10, 210, 46);
ctx.quadraticCurveTo(230, 62, 205, 82);
ctx.quadraticCurveTo(95, 68, 50, 82);
ctx.quadraticCurveTo(20, 72, 45, 45);
ctx.closePath();
ctx.fill();
  //右眼，内边
ctx.beginPath();
ctx.fillStyle = "rgb(255,255,255)";
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(100, 20, 200, 50);
ctx.quadraticCurveTo(220, 62, 200, 75);
ctx.quadraticCurveTo(100, 62, 50, 75);
ctx.quadraticCurveTo(35, 68, 50, 50);
ctx.closePath();
ctx.fill();
  //右眼，眼珠
ctx.beginPath();
ctx.fillStyle = "rgb(100,40,0)";
ctx.arc(76, 54, 18, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();

ctx.restore()

//嘴巴
ctx.beginPath();
ctx.fillStyle = "rgb(100,40,0)";
ctx.moveTo(80, 220);
ctx.bezierCurveTo(100, 370, 400, 370, 420, 220);
ctx.bezierCurveTo(410, 395, 80, 395, 80, 220);
ctx.closePath();
ctx.fill();

//左脸红
ctx.beginPath();
var ellipse_gradient = ctx.createLinearGradient(50, 50, 50, 135);
ellipse_gradient.addColorStop(0, "rgba(250,100,100,1)");
ellipse_gradient.addColorStop(1, "rgba(250,100,100,0)");
ctx.fillStyle = ellipse_gradient;
ctx.ellipse(110, 110, 40, 20, 0, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();

ctx.save();
ctx.translate(280, 0);

//右脸红
ctx.beginPath();
ctx.fillStyle = ellipse_gradient;
ctx.ellipse(110, 110, 40, 20, 0, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
</script>

注：绘制椭圆使用的是较新的内置方法 ellipse()，是 web canvas 后面新增的方法，原始的 canvas 不一定支持此方法。

最后更新时间：2023/05/26 11:23

如果您喜欢此文章，或此文章给您带来了任何帮助，请考虑对我进行资金赞赏，您的支持将会成为我坚持的力量。

注意！你的赞赏转账请考虑再三后支付，此收款不作任何形式的退款。

郭某人的网站

纯 JS canvas 绘制滑稽表情图片

网站维护预告