没有特别的技巧，只是不断尝试坐标，使用绘制直线和绘制弧线的函数尝试
然后，人物说话的动画是用随机数和其他几个嘴型制作的三帧动画
var Vector2=function(xValue,yValue){ this.x=xValue; this.y=yValue; } var Vector3=function(xValue,yValue,zValue){ this.x=xValue; this.y=yValue; this.z=zValue; } function Line(start,size){ line(start.x,start.y,start.x+size.x,start.y+size.y); } function setup() { createCanvas(600, 400); fd=0; } function draw() { background(255); noFill(); strokeWeight(2); DrawOthers(); DrawFancyFace(); if(mouseIsPressed){ console.log(mouseX,mouseY); } } var fd=0; function DrawFancyFace(){ //眼睛 strokeWeight(3); Line(new Vector2(115,199),new Vector2(30,-12.5)); Line(new Vector2(168,179),new Vector2(33,-14)); strokeWeight(2); fill(0,188,255); arc(134,195,23,40,HALF_PI*(-0.4),HALF_PI*(1.9),CLOSE); arc(187,175,24,40,HALF_PI*(-0.4),HALF_PI*(1.9),CLOSE); noFill(); //嘴巴 var time=0.3; var speed=0.8; var value=400*random(speed,1); if(frameCount%time*60<=1) fd=frameCount % value; if(fd<value*0.4){ arc(178,223,30,15,HALF_PI*(-0.1),HALF_PI*(1.7)); } else if(fd<value*0.7){ arc(175,220,30,20,HALF_PI*(0),HALF_PI*(1.4)); arc(180,223,25,20,HALF_PI*(-0.2),HALF_PI*(1.6)); } else{ arc(178,223,30,30,HALF_PI*(-0.1),HALF_PI*(1.7)); arc(168,220,48,16,HALF_PI*(0),HALF_PI*(1.2)); } } function DrawOthers(){ //头发 arc(60, 133, 172-57, 280, 0, HALF_PI-0.1, OPEN); arc(54, 215, 52, 64, 0, HALF_PI, OPEN); line(80,215,85,133); arc(129,139,90,70,HALF_PI*(2.1),HALF_PI*(2.45)) arc(74,225,60,60,HALF_PI*(0.9),HALF_PI*(1.45)); line(78,254,74,271); line(99,113,155,78); arc(176,106,70,70,HALF_PI*(-1.4),HALF_PI*(-0.4)); arc(291,19,220,220,HALF_PI*(1),HALF_PI*(1.575)); arc(236,77,150,150,HALF_PI*(0.5),HALF_PI*(0.85)); arc(290,52,300,280,HALF_PI*(1.27),HALF_PI*(1.7)); arc(193,35,300,300,HALF_PI*(0.6),HALF_PI*(0.85)); line(253,149,280,159); arc(139,126,40,40,HALF_PI*(-0.1),HALF_PI*(1.7)); //脸右侧 arc(192,192,60,60,HALF_PI*(-0.4),HALF_PI*(0.4)); arc(125,180,200,150,HALF_PI*(0.2),HALF_PI*(0.4)); //脸左侧 arc(170,207,120,100,HALF_PI*(1.85),HALF_PI*(2.0)); arc(120,230,25,25,HALF_PI*(1.5),HALF_PI*(2.5)); arc(164,137,270,220,HALF_PI*(0.94),HALF_PI*(1.3)); //头发 arc(309,129,120,120,HALF_PI*(0.8),HALF_PI*(1.55)); arc(250,144,180,180,HALF_PI*(0.3),HALF_PI*(0.8)); arc(313,205,90,90,HALF_PI*(0.95),HALF_PI*(1.6)); arc(281,225,90,90,HALF_PI*(0.4),HALF_PI*(1)); arc(335,198,180,180,HALF_PI*(0.8),HALF_PI*(1.4)); arc(259,238,230,230,HALF_PI*(0.25),HALF_PI*(0.9)); //耳朵 arc(231,195,25,25,HALF_PI*(-1.5),HALF_PI*(1.5)); //蓝玉盘 arc(230,228,20,50,HALF_PI*(-0.8),HALF_PI*(2.8)); //脖子 arc(213,240,35,35,HALF_PI*(1.19),HALF_PI*(2.4)); arc(176,251,10,10,HALF_PI*(-1),HALF_PI*(0.7)); //衣领 line(214,246,164,321); line(190,279,173,251); line(173,251,150,262); line(166,286,150,262); //身体外侧 arc(126,370,300,300,HALF_PI*(-0.6),HALF_PI*(-0.3)); //手掌 arc(115,235,30,30,HALF_PI*(1.5),HALF_PI*(2.5)); arc(132,215,80,80,HALF_PI*(1.2),HALF_PI*(1.5)); //胳膊 line(120,253,110,309); arc(127,305,38,35,HALF_PI*(0.2),HALF_PI*(1.8)); line(146,310,135,254); line(141,245,135,254); //大衣 arc(145,271,20,20,HALF_PI*(-1.65),HALF_PI*(-0.6)); arc(140,307,28,50,HALF_PI*(-1),HALF_PI*(0)); arc(196,292,90,90,HALF_PI*(1.2),HALF_PI*(1.8)); line(235,268,212,302); line(206,317,173,349); arc(180,299,70,85,HALF_PI*(1),HALF_PI*(1.8)); arc(215,348,140,115,HALF_PI*(-0.63),HALF_PI*(0)); //左边头发 line(85,258,95,270); arc(53,257,90,90,HALF_PI*(0.2),HALF_PI*(0.8)); arc(76,247,110,110,HALF_PI*(0.8),HALF_PI*(1.1)); arc(35,283,120,120,HALF_PI*(0.2),HALF_PI*(0.9)); arc(90,253,200,200,HALF_PI*(0.98),HALF_PI*(1.3)); //左手 arc(220,313,28,28,HALF_PI*(0.7),HALF_PI*(3.3)); arc(235,304,20,18,HALF_PI*(-2.1),HALF_PI*(-0)); arc(233,312,28,32,HALF_PI*(-0.3),HALF_PI*(1.2)); arc(238,299,20,15,HALF_PI*(-1.7),HALF_PI*(0.3)); //右腿 arc(134,338,50,50,HALF_PI*(1.5),HALF_PI*(2.5)); arc(127,334,55,57,HALF_PI*(1.5),HALF_PI*(2.5)); //右腿 arc(223,353,90,90,HALF_PI*(-0.6),HALF_PI*(0)); arc(226,360,110,120,HALF_PI*(-0.8),HALF_PI*(-0.4)); arc(306,317,70,90,HALF_PI*(1.35),HALF_PI*(1.8)); line(95,353,284,351); } 来源：博客园
作者：zerlenzhang
链接：https://www.cnblogs.com/zerlenzhang/p/11777363.html