直线和平面

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

fillRect方法可以填充一个矩形。他的输入为矩形框左上角的第一个xy坐标,然后是它的宽和高。相似地,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 像素。