自定义canvas的roundRect方法，以兼容低版本浏览器

在部分低版本的浏览器中，HTML5的canvas中，并没有可以直接使用的roundRect方法，所以我们可以使用CanvasRenderingContext2D API中的其他方法来手动绘制带圆角的矩形。

; (function (global) {
  "use strict";

  if(!global.CanvasRenderingContext2D.prototype.roundRect) {
    global.CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius) {
      let ctx = this;
      
    let [
      topLeftRadius,
      topRightRadius,
      bottomRightRadius,
      bottomLeftRadius
    ] = [0, 0, 0, 0];
    if(Array.isArray(radius)) {
      if(radius.length === 4) {
        [
          topLeftRadius,
          topRightRadius,
          bottomRightRadius,
          bottomLeftRadius
        ] = radius;
      } else {
        return
      }
    } else {
      [
        topLeftRadius,
        topRightRadius,
        bottomRightRadius,
        bottomLeftRadius
      ] = [radius, radius, radius, radius];
    }

    if (width < topLeftRadius + topRightRadius || height < bottomLeftRadius + bottomRightRadius) {
         console.error("Cannot draw the rounded rectangle because the specified dimensions are too small for the given radii.");
         return;
     }

       
       ctx.beginPath();
       ctx.moveTo(x + topLeftRadius, y);
       ctx.lineTo(x + width - topRightRadius, y);
       ctx.quadraticCurveTo(x + width, y, x + width, y + topRightRadius);
       ctx.lineTo(x + width, y + height - bottomRightRadius);
       ctx.quadraticCurveTo(x + width, y + height, x + width - bottomRightRadius, y + height);
       ctx.lineTo(x + bottomLeftRadius, y + height);
       ctx.quadraticCurveTo(x, y + height, x, y + height - bottomLeftRadius);
       ctx.lineTo(x, y + topLeftRadius);
       ctx.quadraticCurveTo(x, y, x + topLeftRadius, y);
       ctx.closePath();
      
    }
  }

})(window);

this.ctx.roundRect(0,0, 100, 20, 2)

this.ctx.roundRect(0,0, 100, 20, [2,0,0,2])