HTML5繪制矩形代碼

HTML5中引入了canvas標簽，可以利用它和JavaScript繪制二維圖形，包括矩形。下面是一個簡單的繪制矩形的HTML5代碼：

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);
</script>

其中，canvas標簽定義了一個畫布，用于繪制二維圖形。通過JavaScript中的getContext()方法獲取畫布的上下文，設置繪制矩形的顏色和位置，最后用fillRect()方法填充顏色。

fillRect()方法有四個參數，分別代表矩形左上角的x坐標、y坐標、寬度和高度。上述代碼中，矩形左上角的坐標為(10, 10)，寬度和高度都為50。

此外，還可以通過strokeRect()方法繪制矩形邊框，和clearRect()方法清除矩形。

ctx.strokeStyle = "#0000FF";
ctx.strokeRect(10, 10, 50, 50);//繪制邊框
ctx.clearRect(10, 10, 50, 50);//清除矩形

以上是HTML5繪制矩形的示例代碼，您也可以結合其他HTML5元素和JavaScript知識，進一步開發出更多豐富的二維圖形效果。