直线和平面

我们可以使用画布接口填充图形，也就是赋予某个区域一个固定的填充颜色或填充模式。我们也可以描边，也就是沿着图形的边沿画出线段。SVG 也使用了相同的技术。

fillRect方法可以填充一个矩形。他的输入为矩形框左上角的第一个x和y坐标，然后是它的宽和高。相似地，strokeRect方法可以画出一个矩形的外框。

两个方法都不需要其他任何参数。填充的颜色以及轮廓的粗细等等都不能由方法的参数决定（像你的合理预期一样），而是由上下文对象的属性决定。

设置fillStyle参数控制图形的填充方式。我们可以将其设置为描述颜色的字符串，使用 CSS 所用的颜色表示法。

strokeStyle属性的作用很相似，但是它用于规定轮廓线的颜色。线条的宽度由lineWidth属性决定。lineWidth的值都为正值。

  1. <canvas></canvas>
  2. <script>
  3.   let cx = document.querySelector("canvas").getContext("2d");
  4.   cx.strokeStyle = "blue";
  5.   cx.strokeRect(5, 5, 50, 50);
  6.   cx.lineWidth = 5;
  7.   cx.strokeRect(135, 5, 50, 50);
  8. </script>

当没有设置width或者height参数时，正如示例一样，画布元素的默认宽度为 300 像素，默认高度为 150 像素。