cvans绘画探索：绘制房屋

如何用cvans绘画，绘制一座房屋？快来看看下面的代码（代码非原创）。

绘制成功后如下图：

<canvas width="300" height="300" id="canvas"/>
<script>
const canvas = document.querySelector('#canvas');
if (canvas.getContext) {
  const ctx = canvas.getContext('2d');
  
  // 设置线条宽度
  ctx.lineWidth = 3;

  // 门
  ctx.fillStyle = 'rgb(159, 99, 71)';
  ctx.fillRect(130, 190, 40, 60);
  ctx.beginPath();
  ctx.arc(140, 220, 3, 0, 2 * Math.PI);
  ctx.fillStyle = 'black';
  ctx.fill();
  ctx.closePath();
  
  // 墙
  ctx.strokeStyle = 'brown';
  ctx.strokeRect(75, 140, 150, 110);

  // 屋顶
  ctx.beginPath();
  ctx.moveTo(50, 140);
  ctx.lineTo(150, 60);
  ctx.lineTo(250, 140);
  ctx.closePath();
  ctx.stroke();
  
  // 烟囱
  ctx.beginPath();
  ctx.moveTo(200, 100);
  ctx.lineTo(200, 60);
  ctx.lineTo(220, 60);
  ctx.lineTo(220, 115);
  ctx.fillStyle = 'darkred';
  ctx.fill();
  ctx.closePath();
  
  // 烟
  ctx.strokeStyle = 'gray';
  ctx.beginPath();
  ctx.arc(230, 40, 10, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(245, 15, 8, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.closePath();
}

</script>