我画了一个矩形的角函数：一个函数矩形

我画了一个矩形的角：

class Program
{
    constructor(draw_area)
  {
    this.draw_area = draw_area;
    this.ctx = draw_area.getContext('2d');
    this.objects = [];
    
    draw_area.addEventListener('click', this.handleClick.bind(this), false);
  }
  
  draw()
  {
    this.ctx.clearRect(0, 0, 700, 700);
    this.objects.forEach((o) => o.draw());
  }
  
  drawRect(x, y, w, h)
  {
    this.objects.push(new Rectangle(this.ctx, x, y, w, h));
  }
    
  handleClick(event)
  {
    var x = event.pageX - this.draw_area.offsetLeft + this.draw_area.clientLeft;
    var y = event.pageY - this.draw_area.offsetTop + this.draw_area.clientTop;
    this.objects.forEach((o) => 
    {
        if (y > o.y && y  o.x && x < o.x + o.w) 
        {
            o.selected = !o.selected;
        }
    });
    
    this.draw();
  }
}
class Rectangle
{
    constructor(ctx, x, y, w, h)
  {
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.cornerSize = 10;
    this.selected = false;
  }
  
  draw()
  {
    
    this.ctx.beginPath();
    this.ctx.rect(this.x, this.y, this.w, this.h);
    this.ctx.closePath();
    this.ctx.stroke();
    
    if(!this.selected)
        return;
    
    this.ctx.beginPath();
    this.ctx.fillStyle = "#FFFFFF";
    this.ctx.strokeStyle = "#000000";
        
    // Corner rects
    this.ctx.rect(
      this.x - this.cornerSize / 2,
      this.y - this.cornerSize / 2,
      this.cornerSize, 
      this.cornerSize
    );
    this.ctx.rect(
      this.x + this.w - this.cornerSize / 2,
      this.y - this.cornerSize / 2,
      this.cornerSize, 
      this.cornerSize
    );
    this.ctx.rect(
      this.x + this.w - this.cornerSize / 2,
      this.y + this.h - this.cornerSize / 2,
      this.cornerSize, 
      this.cornerSize
    );
    this.ctx.rect(
      this.x - this.cornerSize / 2,
      this.y + this.h - this.cornerSize / 2,
      this.cornerSize, 
      this.cornerSize
    );
    this.ctx.closePath();
    this.ctx.fill();
    this.ctx.stroke();
  }
}
var draw_area = document.getElementById('draw_area');
let program = new Program(draw_area);
program.drawRect(50, 50, 100, 100);
program.drawRect(200, 50, 100, 100);
program.draw();

#draw_area{
  background-color: lightgrey;
}

如果我们看一下drawRect函数：

function drawRect(x, y, w, h){
    const cornerSize = 10;
  var object = draw_area.getContext('2d');
  object.beginPath();
  object.rect(x, y, w, h);
  object.closePath();
  object.stroke();
  object.beginPath();
  
  object.fillStyle = "#FFFFFF";
  object.strokeStyle = "#000000";
  
  // Corner rects
  object.rect(
    x - cornerSize / 2,
    y - cornerSize / 2,
    cornerSize, 
    cornerSize
  );
  
  object.rect(
    x + w - cornerSize / 2,
    y - cornerSize / 2,
    cornerSize, 
    cornerSize
  );
  
  object.rect(
    x + w - cornerSize / 2,
    y + h - cornerSize / 2,
    cornerSize, 
    cornerSize
  );
  
  object.rect(
    x - cornerSize / 2,
    y + h - cornerSize / 2,
    cornerSize, 
    cornerSize
  );
  
  object.closePath();
  object.fill();
  object.stroke();
};

这些线首先用于绘制主矩形：

object.beginPath();
object.rect(x, y, w, h);
object.closePath();    
object.stroke();

在这里调用 closePath 很重要，这样画布才能理解矩形与角矩形是分开的。

然后我们只是做一些计算并在正确的位置绘制角矩形，如下所示：

// top-left corner
object.rect(
    x - cornerSize / 2,
    y - cornerSize / 2,
    cornerSize, 
    cornerSize
);

我们最终使用 closePath 和 fill 来应用顶部着色规则：

object.fillStyle = "#FFFFFF";
object.strokeStyle = "#000000";

请注意，由于您使用的是纯画布，而不是像 Fabric.js 这样的任何画布库，因此您必须手动完成所有操作。尽管即使使用库，您也可能必须手动计算每个形状的小矩形位置。