利用之前所學(xué)的線的樣式及上節(jié)的弧形畫(huà)一個(gè)簡(jiǎn)單的機(jī)器人吧捶闸!
// 開(kāi)始新的路徑
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();
// 畫(huà)頭
ctx.beginPath();
// 填充色
ctx.fillStyle = 'green';
// 畫(huà)圓
// 原點(diǎn)的x軸坐標(biāo) 原點(diǎn)Y軸坐標(biāo) 半徑 起始角度 結(jié)束角度 是否逆時(shí)針旋轉(zhuǎn)
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);
// 控制點(diǎn)1的x軸下標(biāo) 控制點(diǎn)1的y軸下標(biāo), 結(jié)束點(diǎn)
// 右臀
ctx.arcTo(350, 350, 300, 350, 40);
ctx.lineTo(300, 350);
// 左臀
ctx.arcTo(150, 350, 150, 300, 40);
ctx.closePath();
ctx.fill();