通过裁剪画布部分区域实现
这个方法的关键道具是clip()API,这个API,可以用你指定的形状在画布上裁剪一部分出来,然后,接下来你在画布上的操作只有在该形状区域内可见,如果还有后续还有对画布的其他地方有操作,可以使用restore()接口恢复,但是必须在使用clip接口前用 save() 接口保存canvas的状态。
示例:
<canvas id="canvas" style="border: 1px solid;"></canvas>
<script>
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = 'https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF';
//直接使用 `arc` 接口
context.save();
context.arc(100, 100, 50, 0, 2 * Math.PI);
// 从画布上裁剪出这个圆形
context.clip();
context.drawImage(img, 50, 50, 100, 100);
</script>
效果如图:
方法封装:
<canvas id="canvas" style="border: 1px solid;"></canvas>
<script>
// 封装了一个简单的方法
function circleImg(ctx, img, x, y, r) {
ctx.save();
var d =2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
}
var img = new Image();
img.src = 'https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF';
var canvas = document.querySelector("#canvas");
var context = canvas1.getContext("2d");
circleImg(context, img, 100, 20, 50);
</script>
效果如图:
其他方法简介 (有Bug,暂不可选):
通过纹理实现
<canvas id="canvas"></canvas>
<script>
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
var min_size = Math.min(w, h);
if (r > min_size / 2) r = min_size / 2;
// 开始绘制
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();
return this;
}
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = 'https://pbs.twimg.com/profile_images/588883654157291520/4DBMn6_A.jpg';
var pattern = context.createPattern(img, "no-repeat");
context.roundRect(0, 0, img.width, img.height, 0);
context.fillStyle = pattern;
context.fill();
</script>
这样做是可以的,这个做法的关键道具是createPattern 这是一个专门用来作纹理的API:
但是,如果你将该形状右移50px就会发现问题所在,图片没有跟着形状(圆框)一起移动:
其实,看第二个画布应该可以看出图片是对画布的左上角做定位的。如果图片没有移动,那么想办法移动图片就好啦!然而,可悲的是没有方法。因此,此法暂不可取。