HTML5 的 canvas 元素提供了繪制圖形的功能。我們可以使用它來繪制各種形狀和圖形。這里我們將演示如何在 canvas 上繪制彩色矩形。

<canvas id="myCanvas" width="200" height="200">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>

首先，我們需要在 HTML 中添加一個 canvas 元素，并給它一個 id 名稱。在這個例子中，我們的 canvas 的寬度和高度都是 200 像素。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = "#00FF00";
ctx.fillRect(70, 10, 50, 50);
ctx.fillStyle = "#0000FF";
ctx.fillRect(130, 10, 50, 50);

接下來，我們需要在 JavaScript 代碼中獲取 canvas 元素，并創(chuàng)建一個 2D 繪圖上下文。然后，我們可以使用 fillStyle 屬性設置矩形的顏色，fillRect 方法繪制矩形。

在這個例子中，我們繪制了三個矩形，分別使用紅色、綠色和藍色填充。

現(xiàn)在，我們可以在瀏覽器中查看結(jié)果了。如果一切正常，你應該能夠看到一個有三個彩色矩形的畫布。