新建文件并創(chuàng)建畫布在進行Canvas繪制矩形和矩形邊框之前，我們首先需要新建一個HTML文件，并在其中創(chuàng)建一個Canvas元素作為繪制的畫布。通過使用HTML5的Canvas標簽，我們可以輕松地實現(xiàn)

新建文件并創(chuàng)建畫布

在進行Canvas繪制矩形和矩形邊框之前，我們首先需要新建一個HTML文件，并在其中創(chuàng)建一個Canvas元素作為繪制的畫布。通過使用HTML5的Canvas標簽，我們可以輕松地實現(xiàn)圖形繪制的功能。

定義函數獲取畫布

接下來，在JavaScript部分，我們定義一個函數`draw(id)`，該函數用于獲取到我們在HTML中創(chuàng)建的Canvas元素，以便后續(xù)在該畫布上進行繪制操作。

獲取上下文

通過Canvas的`getContext('2d')`方法，我們可以獲取到一個2D渲染上下文對象，通過這個上下文對象，我們可以執(zhí)行繪制矩形和設置樣式等操作。

設置填充顏色

在繪制矩形之前，我們需要設置填充顏色，使用` "red";`即可將填充顏色設定為紅色。

設置邊框顏色和邊框寬度

除了填充顏色外，我們還可以設置矩形的邊框顏色和邊框寬度。通過` "f60";`和` 4;`可以分別設置邊框顏色為橙色，邊框寬度為4個像素。

繪制填充矩形和邊框矩形

在設置好顏色和邊框后，我們可以通過`(0, 0, 200, 200);`和`(20, 20, 70, 150);`來繪制填充矩形和邊框矩形。這兩個方法可以分別繪制出指定位置和尺寸的矩形。

改變填充顏色觀察效果

如果我們想要改變填充矩形的顏色，只需再次使用``屬性設置不同的顏色值，然后調用`()`方法即可看到顏色變化的效果。

附上源碼JS部分

```javascript

function draw(id){

var canvas ("canvas");

var context ("2d");

"red";

"f60";

4;

(0, 0, 200, 200);

(20, 20, 70, 150);

(40, 40, 70, 150);

}

```

HTML部分

```html

```

通過以上步驟，我們可以輕松地使用Canvas繪制填充矩形和邊框矩形，并隨時改變顏色以觀察效果變化。Canvas為我們提供了豐富的繪圖API，讓我們能夠實現(xiàn)各種視覺效果和交互功能。如果您對Canvas繪圖有興趣，不妨深入學習更多相關知識，開發(fā)出更加出色的Web應用！