2.1 绘制矩形

优质

小牛编辑

128浏览

2023-12-01

本节，我们将学习如何绘制矩形，它也是HTML5的画布API唯一所提供的内置图形。矩形看上去可能不会让你感到兴奋，但是许多应用程序还是以某种方式在使用它，所以你也应该了解它。

绘制步骤

按照以下步骤，在画布的中央绘制一个简单的矩形：

1. 定义2D画布上下文：

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context  = canvas.getContext("2d");

2. 使用rect()方法绘制矩形，通过fillStyle属性设置填充颜色，并使用fill()方法填充该矩形：

  context.rect(canvas.width  /  2  -  100, canvas.height  /  2  -  50, 200,  100);
  context.fillStyle = "#8ED6FF"; 
  context.fill();
  context.lineWidth   =  5;
  context.strokeStyle = "black"; 
  context.stroke();
};

3. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

正如前面代码所看到的，我们可以使用rect()方法绘制一个简单的矩形：

context.rect(x,y,width,height);

rect()方法在x,y点绘制一个矩形，并通过width和height参数定义矩形的尺寸。本章需要注意的另一个重点是fillStyle和fill()的用法。跟strokeStyle和stroke()类似，我们可以通过fillStyle属性来指定填充颜色，通过fill()来填充图形。

注意，我们在stroke()方法之前调用fill()方法。如果我们在进行描边之前就填充一个图形，则描边样式的一半会被填充样式覆盖掉，实质上就使lineWidth属性设置的宽度减半。因此，先调用fill()方法，再调用stroke()方法，是一个良好的实践。

了解更多

除了rect()方法，还有另外两个方法来绘制矩形，并仅一行代码就可以为矩形应用样式，这两个方法是fillRect()和strokeRect()方法。

fillRect()方法

使用rect()方法绘制矩形后，如果我们想要填充该矩形，我们可能会考虑使用fillRect()单个方法，来同时完成绘制和填充：

context.fillRect(x,y,width,height);

fillRect()方法等价于rect()方法后面紧跟fill()方法。使用该方法时，需要在调用它之前，定义填充样式。

strokeRect()方法

除了fillRect()方法，我们可以使用strokeRect()单个方法来绘制矩形，并对它进行描边：

context.strokeRect(x,y,width,height);

strokeRect()方法等价于rect()方法后面紧跟stroke()方法。跟fillRect()方法类似，需要在调用之前定义描边样式。

不幸的是，HTML5的画布API没有提供能够同时对矩形进行填充和描边的方法。就个人而言，我喜欢使用rect()方法并应用描边样式，并且，在需要填充时，我使用stroke() 和 fill()方法，因为这样做更符合自定义图形的绘制习惯。然而，在使用这些简便方法时，如果你想对一个矩形同时进行描边和填充，在fillRect()方法后面紧跟stroke()是一个良好的实践。如果你使用strokeRect()方法后面紧跟fill()方法，描边样式将被填充样式覆盖，使线条的宽度减半。