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

矩形？"/>

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

使用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="" width="200" height="200"><rect x="50" y="50" width="100" height="100" fill="red" />
</svg>

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