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

在HTML5中，你可以使用Canvas和SVG来绘制矩形。下面是两种方法的示例：

1. 使用Canvas绘制矩形：

首先，你需要在HTML文档中添加一个canvas元素：

<canvas id="myCanvas" width="500" height="500"></canvas>

然后，在JavaScript中，你可以使用Canvas API来绘制一个矩形：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#FF0000';  // 设置填充颜色为红色
ctx.fillRect(50, 50, 100, 100);  // 在(50,50)位置绘制一个100x100的矩形

2. 使用SVG绘制矩形：

在SVG中，你可以使用<rect>元素来绘制矩形。这是一个简单的示例：

<svg width="500" height="500">
  <rect x="50" y="50" width="100" height="100" style="fill:red;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

在这个示例中，<rect>元素的x和y属性定义了矩形左上角的位置，width和height属性定义了矩形的宽度和高度。style属性可以用来设置矩形的填充颜色、边框颜色、边框宽度、填充透明度和边框透明度。

请注意，Canvas和SVG在功能和用法上有很大的不同。Canvas是一个像素画布，非常适合绘制复杂的图形和动画，但它不支持DOM操作和文本渲染。SVG则是一个基于XML的矢量图形语言，它支持DOM操作和文本渲染，但可能不如Canvas在处理复杂图形和动画时那么高效。