直线和平面
我们可以使用画布接口填充图形,也就是赋予某个区域一个固定的填充颜色或填充模式。我们也可以描边,也就是沿着图形的边沿画出线段。SVG 也使用了相同的技术。
fillRect
方法可以填充一个矩形。他的输入为矩形框左上角的第一个x
和y
坐标,然后是它的宽和高。相似地,strokeRect
方法可以画出一个矩形的外框。
两个方法都不需要其他任何参数。填充的颜色以及轮廓的粗细等等都不能由方法的参数决定(像你的合理预期一样),而是由上下文对象的属性决定。
设置fillStyle
参数控制图形的填充方式。我们可以将其设置为描述颜色的字符串,使用 CSS 所用的颜色表示法。
strokeStyle
属性的作用很相似,但是它用于规定轮廓线的颜色。线条的宽度由lineWidth
属性决定。lineWidth
的值都为正值。
<canvas></canvas>
<script>
let cx = document.querySelector("canvas").getContext("2d");
cx.strokeStyle = "blue";
cx.strokeRect(5, 5, 50, 50);
cx.lineWidth = 5;
cx.strokeRect(135, 5, 50, 50);
</script>
当没有设置width
或者height
参数时,正如示例一样,画布元素的默认宽度为 300 像素,默认高度为 150 像素。