【HTML 5】HTML5 Canvas rect(), strokeRect() 和 fillRect() 的差別fillRect()strokeRect()rect()

他們都接受相同的參數，見頁面表格。唯一不同的實作方式與效果方面有差異。

其中fillRect()與strokeRect() 在調用後會立即在畫布上畫面效果，而rect()不會立即将圖形畫出，隻有在調用了stroke()方法之後，才會實際作用于畫布。

從字面上很好了解fillRect()與其他兩個的差別，它是執行填充操作。填充一個矩形區域。

下面是來自W3SHOOL中文站點對它的具體參數及API的詳解：

定義和用法

fillRect() 方法繪制"已填色"的矩形。預設的填充顔色是黑色。

參數

描述

x

矩形左上角的 x 坐标

y

矩形左上角的 y 坐标

width

矩形的寬度，以像素計

height

矩形的高度，以像素計

strokeRect() 方法繪制矩形（不填色）。筆觸的預設顔色是黑色。

下面看一下strokeRect() 與fillRect()的例子。

效果：

rect() 方法建立矩形。但它并不會真正将矩形畫出，隻能調用stroke() 或 fill()後才會真正作用于畫布。

下面的例子将展示這一特性。

雖然執行了rect(),但隻有5秒後執行了stroke()後，畫布上才會出現矩形圖案。

參考：

<a href="http://www.rgraph.net/blog/2013/january/the-difference-between-rect-strokerect-and-fillrect.html">http://www.rgraph.net/blog/2013/january/the-difference-between-rect-strokerect-and-fillrect.html</a>