利用之前所學的線的樣式及上節(jié)的弧形畫一個簡單的機器人吧！

AnRobot.gif

// 開始新的路徑
 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();

canvas-五角星