效果图.png
作品链接
https://codepen.io/SampleTape/full/baNzjP/
主要方法
- beginShape()
- endShape()
- vertex()
- quadraticVertex()
- translate()
- rotate()
- push()
- pop()
- ellipse()
过程分解（蜜蜂）
一、绘制蜜蜂的一对触角
绘制蜜蜂的一对触角.png
stroke(0);//设置轮廓颜色为黑色
noFill();//无填充色
rotate(PI/12);//将坐标轴旋转PI / 12使蜜蜂的身体倾斜
beginShape();//开始绘制蜜蜂的一只触角
vertex(-r/4,0);//起点
quadraticVertex(-r/2,-r/2,r/4, -r);//设置贝赛尔曲线的端点
ellipse(r/4 + 2,-r + 2,4,4);//触角末端的圆点
endShape();//结束绘制
beginShape();//开始绘制蜜蜂的另一只触角
vertex(-r/4,0);//起点
quadraticVertex(-r + 10,-r + 10,r/4, -r + 10);//设置贝赛尔曲线的端点
ellipse(r/4 + 2,-r + 10 + 2,4,4);//触角末端的圆点
endShape();//结束绘制
二、绘制蜜蜂的头
绘制蜜蜂的头.png
fill('#fff');//设置填充色为白色
ellipse(0,0,r/2,r/2);//以坐标轴原点为圆心画圆
三、绘制蜜蜂的眼睛
绘制蜜蜂的眼睛.png
fill('#000');//设置填充色为黑色
ellipse(-r/12,r/8,r/4,r/4);//绘制眼睛
四、绘制蜜蜂的身体和刺
绘制蜜蜂的身体和刺.png
translate(r/2,0);//将坐标轴向右平移
fill('#000');//设置填充色为黑色
ellipse(0,0,r/3 * 2,r/3);//画一个椭圆（身体）
line(0,0,r/3 + 5,0);//画线（蜂刺）
五、绘制蜜蜂的翅膀
绘制蜜蜂的翅膀.png
fill('#fff');//设置填充色为白色
translate(-r/6,-r/3);//将坐标轴平移至身体中点
rotate(PI/3);//使翅膀倾斜一定角度
ellipse(0,0,r/3 * 2,r/3);//绘制椭圆
translate(-r/6,-r/3);//将坐标轴平移至身体中点
rotate(PI/3);//使翅膀倾斜一定角度
ellipse(0,0,r/3 * 2,r/3);//绘制椭圆
绘制蜜蜂所需全部代码
push();
stroke(1);
noFill();
rotate(PI/12);
beginShape();
vertex(-r/4,0);
quadraticVertex(-r/2,-r/2,r/4, -r);
ellipse(r/4 + 2,-r + 2,4,4);
endShape();
beginShape();
vertex(-r/4,0);
quadraticVertex(-r + 10,-r + 10,r/4, -r + 10);
ellipse(r/4 + 2,-r + 10 + 2,4,4);
endShape();
fill('#fff');
ellipse(0,0,r/2,r/2);
fill('#000');
ellipse(-r/12,r/8,r/4,r/4);
translate(r/2,0);
fill('#000');
ellipse(0,0,r/3 * 2,r/3);
line(0,0,r/3 + 5,0);
translate(-r/6,-r/3);
fill('#fff');
rotate(PI/3);
ellipse(0,0,r/3 * 2,r/3);
rotate(PI/3);
translate(-r/6,-r/3);
ellipse(0,0,r/3 * 2,r/3);
pop();