如何使用 Canvas和HTML5中的SVG画一个矩形？

祈澈菇凉2023-10-22 5:00

使用Canvas和SVG分别绘制矩形的方法如下：

Canvas绘制矩形：

复制代码

<canvas id="canvas" width="200" height="200"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = 'red';
  ctx.fillRect(50, 50, 100, 100);
</script>

创建了一个Canvas元素，并通过getContext('2d')获取了绘图上下文。然后，使用fillStyle来设置填充颜色，使用fillRect方法绘制矩形，指定矩形的起始坐标（50，50）和宽高（100，100）。

SVG绘制矩形：

复制代码

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="red" />
</svg>

在上述代码中，用<svg>元素创建了一个SVG容器，然后使用元素来绘制矩形。通过设置x、y、width、height属性来指定矩形的位置和尺寸，通过fill属性设置填充颜色。