如何使用 Canvas和HTML5中的SVG画一个矩形？
在 HTML5 中，你可以使用 Canvas 或 SVG 来绘制图形。下面是如何使用这两种方式来绘制一个矩形：
使用 Canvas 绘制矩形
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000"; // 设置填充颜色为红色
ctx.fillRect(50, 50, 100, 100); // 绘制一个宽100px，高100px的矩形，左上角位于(50px, 50px)
</script>
在这个例子中，我们首先创建了一个 Canvas 元素，然后获取了它的 2D 渲染上下文，最后使用 fillRect 方法绘制了一个红色的矩形。
使用 SVG 绘制矩形
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="red" />
</svg>
在这个例子中，我们创建了一个 SVG 元素，然后在其中添加了一个 rect 元素来绘制一个红色的矩形。
需要注意的是，Canvas 是基于像素的位图绘制，适合游戏、像素操作等需要大量动态更新的场景，而 SVG 是基于矢量的，适合静态图形或者需要缩放的场景。