3-8编程练习

来源：3-8 编程练习

qq_紾悕_1

2019-05-30 15:20:05

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas{background-color:lightblue;}
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="800">
        您的浏览器不支持canvas
    </canvas>

    <script>
//在此处写出代码
        var canvas = document.getElementById('canvas');
  var ctx   = canvas.getContext('2d');

// 天线
  ctx.moveTo(200,60);
  ctx.lineTo(250,260);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(400,60);
  ctx.lineTo(350,260);
  ctx.stroke();
  ctx.beginPath();
//   脸部
  ctx.strokeRect(200,260,200,150);
  ctx.strokeRect(170,300,30,50);
  ctx.strokeRect(400,300,30,50);
  ctx.strokeRect(250,350,100,30);
  ctx.beginPath();
  ctx.arc(250,320,15,0,Math.PI*2,true);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(350,320,15,0,Math.PI*2,true);
  ctx.stroke();
//   身体
  ctx.beginPath();
  ctx.strokeRect(220,410,150,200);
  ctx.beginPath();
  ctx.strokeRect(20,450,200,30);
  ctx.beginPath();
  ctx.strokeRect(370,450,200,30);
  ctx.beginPath();
  ctx.strokeRect(240,610,30,150);
  ctx.beginPath();
  ctx.strokeRect(320,610,30,150);

</script>
</body>