console 命令行工具 X clear

console

CanvasRenderingContext2D.prototype.drawRoundRectPath = function (x, y, width, height, radius) {
     this.save();
      this.beginPath();
      let min = Math.min(width,height);
      if(radius>min/2){
          radius = min/2;
      }
      let points = [
        [x+radius,y],
        [x+width-radius,y],
        [x+width,y+radius],
        [x+width,y+height-radius],
        [x+width-radius,y+height],
        [x+radius,y+height],
        [x,y+height-radius],
        [x,y+radius]
      ]
      this.moveTo(...points[0]);
      this.lineTo(...points[1]); 
      this.arcTo(x+width,y,...points[3],radius);
      
      // this.moveTo(...points[2]);
      this.lineTo(...points[3]); 
      this.arcTo(x+width,y+height,...points[5],radius);

      // this.moveTo(...points[4]);
      this.lineTo(...points[5]); 
      this.arcTo(x,y+height,...points[7],radius);
      // this.moveTo(...points[6]);
      this.lineTo(...points[7]); 
      this.arcTo(x,y,...points[1],radius);
      this.lineJoin='round'
      this.stroke();
      
      this.closePath();
      this.restore();
    }



    let canvas = document.createElement('canvas');
    canvas.height = 500;
    canvas.width = 500;
    canvas.style.backgroundColor = 'white'
    document.body.appendChild(canvas);

    ctx = canvas.getContext('2d');
    console.log(ctx);

    ctx.drawRoundRectPath(20, 20, 200, 100, 20);

<html>
    <body>
	
</body>
</html>