console
CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
var min_size = Math.min(w, h);
if (!r || r > min_size / 2) r = min_size / 2;
if (r === min_size / 2) {
this.arc(x + r, y + r, r, 0, 2 * Math.PI);
} else {
this.beginPath();
this.moveTo(x + r, y);
this.arcTo(x + w, y, x + w, y + h, r);
this.arcTo(x + w, y + h, x, y + h, r);
this.arcTo(x, y + h, x, y, r);
this.arcTo(x, y, x + w, y, r);
this.stroke();
this.closePath();
}
this.clip();
return this;
}
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
var img = new Image();
var x = 10,
y = 10;
img.src = 'https://www.baidu.com/img/bd_logo1.png?where=super';
var pattern = context.createPattern(img, "no-repeat");
context.strokeStyle = 'rgba(0,0,0,0)';
context.roundRect(x, y, 100, 100, 20);
context.drawImage(img, x, y, 100, 100);
context.globalAlpha = 0;
<canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>