Question

我遇到了一个问题：我要抓住用户displayAvatar()，然后使用圆弧使图像变圆。效果很好，但是，我需要在该图像上方放置一个圆圈，但是由于先前的clip()

，它已被切成两半

没有clip()：https://i.gyazo.com/b474c656f33a1f004f5e3becffcef527.png

使用clip()：https://i.gyazo.com/da13377cd3f6dc7516c2b8fd1f0f8ac9.png

我知道在“ With clip（）”图像中，好像弧形边框显示在剪辑的外部，但这已硬编码到图像中，我将其作为图像编辑器的指南。 / p>

我尝试遍历代码，删除了ctx.clip()行，发现我的圆圈在图像顶部显示得很好。

        // circle around avatar
        ctx.beginPath();
        ctx.arc(122.5, 141.8, 81, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.clip();
        const avatar = await Canvas.loadImage(
            message.author.displayAvatarURL({ format: 'png' })
        );
        ctx.strokeStyle = '#ffffff';
        ctx.strokeRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(avatar, 41.5, 60.5, 162, 162);

        // presence circle
        ctx.beginPath();
        ctx.arc(184.5, 193.5, 19, 0, Math.PI * 2, true);
        ctx.strokeStyle = '#000000';
        ctx.lineWidth = 8;
        ctx.stroke();
        ctx.fillStyle = userStatusColor;
        ctx.fill();

Answer 1

看看canvas clip（）的定义：
https://www.w3schools.com/tags/canvas_clip.asp

提示：裁剪一个区域后，所有将来的绘图将限于该裁剪的区域（无法访问画布上的其他区域）。但是，您可以在使用clip（）方法之前使用save（）方法保存当前的画布区域，并在以后的任何时候（使用restore（）方法）将其还原。

下面是使用保存和恢复的示例

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(90, 90, 81, 0, Math.PI * 2, true);
ctx.stroke();

ctx.save();
ctx.clip();

ctx.beginPath();
ctx.arc(150, 50, 19, 0, Math.PI * 2, true);
ctx.fillStyle = '#0000ff';
ctx.lineWidth = 8;
ctx.stroke();
ctx.fill();

ctx.restore();

ctx.beginPath();
ctx.arc(170, 99, 19, 0, Math.PI * 2, true);
ctx.fillStyle = '#ff0000';
ctx.lineWidth = 8;
ctx.stroke();
ctx.fill();

<canvas id="canvas"></canvas>

重叠裁剪问题

1 个答案: