Question

我尝试用以下形状的图像制作蒙版：http://narty.fr/demo/canvas_experiment-1/

但是结果隐藏了所有其他形状，并且当我尝试设置另一个globalCompositeOperation（源代码结束）时不起作用。

在我的CenterRound.js中

draw() {
    this.pointsInitial.map((_point, i) => {
        const idX = i * 2
        const idY = i * 2 + 1
        this.points[idX] += _point.coordX()
        this.points[idY] += _point.coordY()
    })

    this.context.drawImage(this.img, this.sizes.width/2 - 500/2, this.sizes.height/2-550/2, 500, 550);

    this.context.globalCompositeOperation = "destination-atop"
    this.context.fillStyle = this.color;
    this.context.beginPath();

    this.context.curve(this.points, 0.5, 80, true)
    this.context.closePath()
    this.context.fill();
}

这是我第一个在中心绘制形状的功能

这里它在另一个类中通过没有globalCompositeOperation来实现相同的功能

在Round.js中

draw() {
    this.pointsInitial.map((_point, i) => {
        const idX = i * 2
        const idY = i * 2 + 1
        this.points[idX] += _point.coordX()
        this.points[idY] += _point.coordY()
    })

    this.context.fillStyle = this.color;
    this.context.beginPath();
    this.context.curve(this.points, 0.5, 80, true)
    this.context.closePath()
    this.context.fill();
}

我尝试在此函数中设置新的globalCompositeOperation，但这不起作用

谢谢

canvas globalCompositeOperation更改元素

0 个答案: