canvas绘制矩形

Posted 2021-02-08 ye-hcj

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();