利用之前所学的线的样式及上节的弧形画一个简单的机器人吧！
image
// 开始新的路径
ctx.beginPath();
// 描边色
ctx.strokeStyle = 'green';
// 线宽
ctx.lineWidth = 40;
// 左边手
// 线帽
ctx.lineCap = 'round';
// 下笔
ctx.moveTo(120, 160);
// 起笔
ctx.lineTo(120, 280);
// 右边的手
// 下笔
ctx.moveTo(380, 160);
// 起笔
ctx.lineTo(380, 280);
// 左边的脚
// 下笔
ctx.moveTo(200, 350);
// 起笔
ctx.lineTo(200, 420);
// 右边的脚
// 下笔
ctx.moveTo(300, 350);
// 起笔
ctx.lineTo(300, 420);
// 描边
ctx.stroke();
// 画头
ctx.beginPath();
// 填充色
ctx.fillStyle = 'green';
// 画圆
// 原点的x轴坐标 原点Y轴坐标 半径 起始角度 结束角度 是否逆时针旋转
ctx.arc(250, 140, 100, 0, -Math.PI, true);
// 闭合路径
// ctx.closePath();
// 填充
ctx.fill();
// 天线
ctx.beginPath();
ctx.lineWidth = 4;
ctx.moveTo(170, 20);
ctx.lineTo(200, 70);
ctx.moveTo(330, 20);
ctx.lineTo(300, 70);
ctx.stroke();
// 眼睛
ctx.beginPath();
ctx.fillStyle = 'white';
ctx.arc(200, 100, 10, 0, 2 * Math.PI);
ctx.arc(300, 100, 10, 0, 2 * Math.PI);
// 填充
ctx.fill();
// 身体
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.moveTo(150, 150);
ctx.lineTo(350, 150);
ctx.lineTo(350, 300);
// 控制点1的x轴下标 控制点1的y轴下标, 结束点
// 右臀
ctx.arcTo(350, 350, 300, 350, 40);
ctx.lineTo(300, 350);
// 左臀
ctx.arcTo(150, 350, 150, 300, 40);
ctx.closePath();
ctx.fill();
作者：LH
链接：//www.greatytc.com/p/be11bcadbd46
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
