请描述一下在HTML5中使用Canvas和SVG分别绘制矩形的具体步骤和代码实现。

解答思路：

在HTML5中，可以使用Canvas和SVG两种方式来绘制矩形。每种技术都有其独特的方法和属性。

使用Canvas绘制矩形：

1. 首先，你需要在HTML文档中创建一个canvas元素。
2. 然后，通过JavaScript获取该canvas的2D渲染上下文。
3. 使用上下文的rect方法绘制矩形，然后使用fill或stroke方法填充或描边。

使用SVG绘制矩形：

1. 在HTML文档中创建一个SVG元素。
2. 在SVG元素内部，使用rect元素来创建矩形。
3. 通过设置rect元素的属性，如宽度、高度、填充色和描边色等，来定义矩形的样式。

最优回答：

使用Canvas绘制矩形：

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.rect(50, 50, 200, 100); // 绘制矩形，参数分别为矩形左上角的x坐标，y坐标，宽度和高度
  ctx.fill(); // 填充矩形
</script>

使用SVG绘制矩形：

<svg width="500" height="500">
  <rect width="200" height="100" x="50" y="50" style="fill:rgb(255,0,0);stroke:black;stroke-width:3" /> <!-- x和y是矩形的起始位置，width和height是矩形的尺寸，style定义了填充色、描边色和描边宽度 -->
</svg>

• Canvas和SVG都是HTML5中的图形技术，但它们在实现方式和功能上有很大的不同。Canvas通过画布和上下文来绘制图形，而SVG则使用XML格式来描述矢量图形。这使得SVG在放大或缩小时能保持清晰度，而Canvas绘制的图形可能会出现像素化。
• 在使用Canvas和SVG绘制矩形时，还可以添加更多的属性和方法来实现更复杂的效果，例如渐变填充、阴影、动画等。