如何使用多个弧从图像裁剪圆?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (21)

我试图从2个图像中裁剪出一个圆圈并将它们并排放置,如下所示:

const ctx = $('#canvas')[0].getContext("2d");

const image = new Image();
image.onload = () => {
        const coords = [[115, 62.5], [495, 62.5]];
        const coords2 = [[65, 12.5] , [445, 12.5]];

        for(let i = 0; i < coords.length; i++) {
            ctx.beginPath();
            ctx.arc(coords[i][0], coords[i][1], 50, 0, Math.PI * 2, true);
            ctx.clip();
            ctx.drawImage(image, coords2[i][0], coords2[i][1], 100, 100);

        }
    };
image.src = 'https://placeholdit.imgix.net/~text?txtsize=50&w=700&h=250&bg=afeafe';

#canvas {
    border:1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" width="800" height="200"></canvas>

但是,这只是裁剪一个图像,另一个没有显示,我不明白为什么?

当我注释掉这些行

ctx.beginPath();
ctx.arc(coords[i][0], coords[i][1], 100 / 2, 0, Math.PI * 2, true);
ctx.clip();

它正确放置2张图像,所以定位不是问题。

提问于
用户回答回答于

修正了在裁剪上下文之前保存上下文,然后在剪裁后恢复上下文,如下所示:

const ctx = $('#canvas')[0].getContext("2d");

const image = new Image();

image.onload = () => {
	const coords = [[115, 62.5], [495, 62.5]];
	const coords2 = [[65, 12.5] , [445, 12.5]]
	for(let i = 0; i < coords.length; i++) {
		ctx.save();
		ctx.beginPath();
		ctx.arc(coords[i][0], coords[i][1], 100 / 2, 0, Math.PI * 2, true);
  	ctx.closePath();
  	ctx.clip();
  	ctx.drawImage(image, coords2[i][0], coords2[i][1], 200 / 2, 200 / 2);
  	ctx.restore();
	}
};

image.src = 'https://placeholdit.imgix.net/~text?txtsize=50&w=700&h=250&bg=afeafe';
#canvas {
    border:1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" width="800" height="200"></canvas>

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问9 回答
  • 富有想象力的人

    3 粉丝0 提问7 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • 人生的旅途

    10 粉丝484 提问6 回答

扫码关注云+社区

领取腾讯云代金券