一、fillrect簡介
fillrect是一個Canvas API的函數，它用於在畫布上繪製填充矩形。fillrect接受四個參數，分別對應矩形的x坐標、y坐標、寬和高。其中，x和y坐標指定了矩形的左上角位置，寬和高定義了矩形的大小。使用fillrect可以輕易地在畫布上繪製出需要的矩形形狀。
二、fillrect實例
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'blue';
ctx.fillRect(70, 10, 50, 50);
ctx.fillStyle = 'green';
ctx.fillRect(130, 10, 50, 50);
ctx.fillStyle = '#FF5500';
ctx.fillRect(190, 10, 50, 50);
上面這個例子展示了如何使用fillrect在畫布上繪製四個不同顏色的矩形，每個矩形都有不同的位置和大小。
三、fillrect和strokeRect的區別
除了fillrect之外，還有strokeRect函數，用於在畫布上繪製非填充矩形。兩個函數的區別在於fillrect會將矩形內部填充，而strokeRect只會繪製矩形邊框。在搭建基本框架時，通常會使用strokeRect來描繪形狀，然後使用fillRect來填充矩形。
四、fillrect的樣式和屬性
fillStyle是fillrect函數的一個關鍵屬性，它指定了矩形填充的顏色或樣式。fillStyle可以是顏色字元串（如’red’、’green’等），也可以是漸變對象或圖案對象。除了fillStyle之外，還有其他一些fillrect函數的屬性和方法，包括globalAlpha、globalCompositeOperation、rect等。這些屬性和方法都可以用來對繪圖進行更複雜的控制。
五、fillrect在遊戲中的應用
fillrect廣泛應用於遊戲開發中，用於繪製遊戲界面、地圖、角色等各種元素。特別是在2D遊戲開發中，常常使用fillrect來描繪遊戲場景和角色。通過對fillrect的細緻運用，可以給遊戲增加更豐富的畫面效果和動態交互，提高遊戲的體驗感。
原創文章，作者：EYRU，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/138071.html
微信掃一掃 
支付寶掃一掃 