在第三章中（
canvas學習總結三：繪製路徑-線段
）我們提高canvas繪圖環境中有些屬於立即繪製圖形方法，有些繪圖方法是基於路徑的。
立即繪製圖形方法僅有兩個strokerect(),fillrect(),兩個方法都是用來繪製矩形的。
canvas的api提供了如下三個方法，分別用於矩形的清除，描邊與填充
我們先來看看基於路徑的繪製矩形的方法
rect()繪製矩形
rect(x, y, w, h):繪製乙個封閉的矩形路徑
引數x, y 分別為矩形左上角的座標，w, h 分別為矩形的寬高
立即繪圖函式
strokerect(x, y, w, h): 繪製乙個描邊的矩形
引數x, y 分別為矩形左上角的座標，w, h 分別為矩形的寬高
fillrect(x, y, w, h): 繪製乙個填充的矩形
引數x, y 分別為矩形左上角的座標，w, h 分別為矩形的寬高
clearrect(x, y, w, h): 清除指定區域內的所有畫素
引數x, y 分別為矩形左上角的座標，w, h 分別為矩形的寬高
清除畫布的方法
ctx.clearrect(0, 0, canvas.width, canvas.height);canvas學習總結五：線段的端點與連線點
）我們介紹了linejoin屬性 用來設定線的連線點的樣式，因此我們可以繪製圓角矩形
當然我們還可以使用linejoin的其他屬性值繪製不同方式的矩形。我們可以自己測試一下。
總結：
路徑繪製矩形
moveto(), lineto()繪製路徑,stroke()與fill()進行描邊與填充
rect(x, y, w, h)順時針繪製路徑,stroke()與fill()進行描邊與填充
立即繪製矩形
strokerect(x, y, w, h): 繪製乙個描邊的矩形
fillrect(x, y, w, h): 繪製乙個填充的矩形
Canvas繪製矩形
context.rect x y width height 規劃了矩形的路徑 context.fillrect x y width height 根據fillstyle繪製出乙個填充的矩形 context.strokerect x y width height 根據strokestyle繪製出乙個矩...
canvas繪製矩形
1.繪製乙個填充的矩形 fillrect x,y,width,height 2.繪製乙個矩形的邊框 strokerect x,y,width,height 3.清除指定矩形區域，讓清除部分完全透明 clearrect x,y,width,height 其中x y是相對於畫布左上角0,0 的距離，wi...
繪製矩形 canvas 繪製矩形及弧形
矩形是唯一一種可以直接在 2d 上下文中繪製的形狀。與矩形有關的方法包括 fillrect strokerect 和 clearrect 這三個方法都能接收 4 個引數 矩形的 x 座標 矩形的 y 座標 矩形寬度和矩形高度 首先，fillrect 方法在畫布上繪製的矩形會填充指定的顏色。填充的顏色...