HTML5是一種強大的標記語言，用于創建Web頁面和應用程序。其中，矩形是常用的形狀之一，在HTML5中，可以使用canvas元素來繪制矩形。下面是一個基本的HTML5矩形代碼。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

上面的代碼中，canvas元素是用來繪制圖形的元素，而getContext("2d")則是獲得2D上下文對象的方法。fillRect()方法用來填充一個矩形，它有四個參數：x軸坐標、y軸坐標、寬度和高度。在這個例子中，填充矩形的顏色設置為紅色（"#FF0000"）。 如果想要使矩形的邊框更加明顯，可以使用strokeRect()方法。它的用法和fillRect()方法類似，只需要把fillRect()替換為strokeRect()即可。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#000";
ctx.strokeRect(0, 0, 150, 75);
</script>

上面的代碼中，strokeStyle屬性用來設置矩形邊框的顏色，它的值為"#000"，即黑色。矩形的邊框寬度和樣式可以使用lineWidth和lineCap等屬性進行設置。 除了填充和繪制矩形之外，HTML5還提供了許多其他的繪圖方法和屬性，例如繪制圓形、直線、弧線等等。這些方法和屬性使得HTML5能夠更加多樣化地創建圖形，豐富了Web頁面的視覺效果。 總之，HTML5的canvas元素是一個非常有用的工具，它可以用來繪制各種各樣的圖形。通過使用fillRect()和strokeRect()方法，我們可以在HTML頁面中創建簡單的矩形，并通過樣式和屬性的調整實現圖形的多樣化。