直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用canvas绘制android机器人</title> </head> <body> <canvas id="myCanvas"></canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var W = window.innerWidth-200; var H = window.innerHeight; c.width = W; c.height = H; drawRobot(); function drawRobot(){ var color = '#a4ca39'; ctx.save(); //锁画布(为了保存之前的画布状态) // ctx.scale(0.3,0.3);//缩放图形 // ctx.translate(transX,transY);//距离原位置起点的偏移 ctx.fillStyle = color; // 头部 drawHead(140,100,92); function drawHead(startX,startY,radius){ ctx.beginPath(); ctx.arc(startX,startY,radius,0,Math.PI,true); ctx.fill(); } //眼睛 drawEye(95,60,8); drawEye(174,60,8); function drawEye(startX,startY,radius){ ctx.fillStyle = "#ffffff"; ctx.beginPath(); ctx.arc(startX,startY,radius,0,2*Math.PI); ctx.fill(); } //触角 drawWireLeft(72,-5,5,20,24); drawWireRight(200,-5,5,20,24); function drawWireLeft(startX,startY,lineWidth,lineHeight,endY){ ctx.strokeStyle=color; ctx.beginPath(); ctx.moveTo(startX,startY); ctx.lineTo(startX+lineHeight,endY); ctx.lineWidth = lineWidth; ctx.stroke(); } function drawWireRight(startX,startY,lineWidth,lineHeight,endY){ ctx.strokeStyle=color; ctx.beginPath(); ctx.moveTo(startX,startY); ctx.lineTo(startX-lineHeight,endY); ctx.lineWidth = lineWidth; ctx.stroke(); } //身体 drawBody(48,107,232,255,20); function drawBody(startX,startY,endX,endY,radius){ ctx.fillStyle=color; ctx.beginPath(); ctx.moveTo(startX,startY); ctx.lineTo(endX,startY); ctx.lineTo(endX,endY-radius); ctx.arcTo(endX,endY,endX-radius,endY,radius); ctx.lineTo(startX+radius,endY); ctx.arcTo(startX,endY,startX,endY-radius,radius); ctx.lineTo(startX,startY); ctx.fill(); ctx.closePath(); } //腿 drawLeg(82,255,300,20); drawLeg(152,255,300,20); function drawLeg(startX,startY,endY,radius){ var endX = startX + radius*2; ctx.fillStyle=color; ctx.fillRect(startX,startY,radius*2,endY-startY); ctx.beginPath(); ctx.arc(endX-radius,endY,radius,0,Math.PI); ctx.fill(); } //手臂 drawHand(20,110,210); drawHand(260,110,210); function drawHand(startX,startY,endY){ ctx.strokeStyle=color; ctx.beginPath(); ctx.moveTo(startX,startY); ctx.lineTo(startX,endY); ctx.lineCap = "round"; ctx.lineWidth = 40; ctx.stroke(); } ctx.restore();//把当前画布返回(调整)到上一个save()状态之前 } </script> </body> </html>
效果如图：
