canvas繪制矩形

canvas繪制矩形

1. 方法

   fillRect(x, y, width, height)           畫一個實心的矩形
   clearRect(x, y, width, height)          清除一塊兒矩形區域
   strokeRect(x, y, width, height)         畫一個帶邊框的矩形
   rect(x, y, width, height)               直接畫一個矩形
   

2. 畫一個矩形

   const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
   
   ctx.fillRect(25, 25, 100, 100);
   ctx.clearRect(45, 45, 60, 60);
   ctx.strokeRect(50, 50, 50, 50);
   

3. 畫一個矩形（使用rect）

   ctx.rect(50,50,200,100);    
   ctx.fill();