没有特别的技巧，只是不断尝试坐标，使用绘制直线和绘制弧线的函数尝试
然后，人物说话的动画是用随机数和其他几个嘴型制作的三帧动画
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);
}