在部分低版本的浏览器中,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])