3-11练习

来源：3-11 编程练习

qq_紾悕_1

2019-05-30 15:56:16

<!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.strokeStyle="orange";
  ctx.lineWidth=2;
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(400,60);
  ctx.lineTo(350,260);
  ctx.stroke();
  ctx.beginPath();
  ctx.fillStyle ='#ffdab9';
        ctx.fillRect(200,260,200,150);

  //耳朵
  ctx.fillStyle ='#ffd700';
        ctx.fillRect(170,300,30,50);
        ctx.fillStyle ='#ffd700';
        ctx.fillRect(400,300,30,50);

        //嘴
  ctx.fillStyle ='red';
        ctx.fillRect(250,350,100,30);

        //眼睛
  ctx.beginPath();
  ctx.arc(250,320,15,0,Math.PI*2,true);
  ctx.fillStyle ='black';
        ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(350,320,15,0,Math.PI*2,true);
  ctx.fillStyle ='black';
        ctx.fill();
  ctx.closePath();

  //身体
  ctx.fillStyle="#ffb6c1";
  ctx.fillRect(220,410,150,200)

  ctx.beginPath();
  ctx.fillStyle="#20b2aa";
  ctx.fillRect(20,450,200,30);
  ctx.fillRect(370,450,200,30);
  ctx.fillRect(240,610,30,150);
  ctx.fillRect(320,610,30,150);

</script>
</body>
</html>

写回答

1回答