Canvas父子元素渲染：父元素透明度设置问题求助

我在Canvas上采用父子逻辑渲染元素，希望为父元素设置透明度，但当前实现方式存在问题。若通过将子元素透明度与父元素透明度相乘的方式设置，得到的是截图中的「CURRENT OUTCOME」效果，而我需要的是「DESIRED OUTCOME」效果。其中SOURCE图是未设置透明度的原图，CURRENT OUTCOME是设置0.5透明度后的错误效果，期望达到DESIRED OUTCOME的效果。

class CanvasNode 
{
    parent: CanvasNode;
    children: Array<CanvasNode>;
    opacity: 1;
    render() { ... some render code ... }
    append(node) { this.children.push(node); }

    // this is not working correctly
    setOpacity(value) { this.opacity = this.parent.opacity * value; } 
}
class CanvasImage extends CanvasNode {}
class CustomCanvas
{
    constructor()
    {
         const canvas = document.createElement('canvas');
         const parent = new CanvasNode();
         const child1 = new CanvasImage('https://img.youtube.com/vi/c4zUnACRrQU/0.jpg');
         parent.append(child1);
         const child2 = new CanvasImage('https://betanews.com/wp-content/uploads/2017/08/new-youtube-logo.jpg');
         parent.append(child2);
         
         // this is not working correctly
         parent.setOpacity(0.5);
    }
}

解决方案 #

问题出在你把父元素的透明度直接传递给子元素，导致子元素在主画布上叠加绘制时，重叠区域的透明度被重复计算，出现颜色加深的错误效果。正确的做法是把父元素和所有子元素当成一个整体，先绘制到离屏Canvas，再给这个整体应用透明度。

修改后的代码如下：

class CanvasNode {
    parent = null;
    children = [];
    localOpacity = 1; // 存储自身设置的透明度，不直接与父级相乘

    // 计算最终透明度：父级透明度 × 自身透明度
    get finalOpacity() {
        return this.parent ? this.parent.finalOpacity * this.localOpacity : this.localOpacity;
    }

    render(ctx) {
        // 有子元素的节点，用离屏Canvas绘制整体
        if (this.children.length > 0) {
            const offscreenCanvas = document.createElement('canvas');
            offscreenCanvas.width = ctx.canvas.width;
            offscreenCanvas.height = ctx.canvas.height;
            const offscreenCtx = offscreenCanvas.getContext('2d');

            // 先把所有子元素画到离屏Canvas
            this.children.forEach(child => child.render(offscreenCtx));

            // 把离屏Canvas以最终透明度画到主画布
            ctx.globalAlpha = this.finalOpacity;
            ctx.drawImage(offscreenCanvas, 0, 0);
            ctx.globalAlpha = 1; // 恢复全局透明度，避免影响后续绘制
        }
    }

    append(node) {
        node.parent = this;
        this.children.push(node);
    }

    setOpacity(value) {
        this.localOpacity = value;
    }
}

class CanvasImage extends CanvasNode {
    constructor(src) {
        super();
        this.image = new Image();
        this.image.src = src;
        this.image.onload = () => {
            // 图片加载完成后可触发重绘逻辑
        };
    }

    render(ctx) {
        ctx.globalAlpha = this.finalOpacity;
        ctx.drawImage(this.image, 0, 0); // 可根据需求调整绘制位置
        ctx.globalAlpha = 1;
    }
}

class CustomCanvas {
    constructor() {
        const canvas = document.createElement('canvas');
        canvas.width = 800;
        canvas.height = 600;
        document.body.appendChild(canvas);
        const ctx = canvas.getContext('2d');

        const parent = new CanvasNode();
        const child1 = new CanvasImage('https://img.youtube.com/vi/c4zUnACRrQU/0.jpg');
        parent.append(child1);
        const child2 = new CanvasImage('https://betanews.com/wp-content/uploads/2017/08/new-youtube-logo.jpg');
        parent.append(child2);

        parent.setOpacity(0.5);
        parent.render(ctx);
    }
}

new CustomCanvas();

原理说明 #

• 给每个节点新增localOpacity存储自身的透明度设置，通过finalOpacity计算继承后的最终透明度。
• 父节点渲染时，先将所有子元素绘制到离屏Canvas，再将这个离屏Canvas作为一个整体应用透明度，这样子元素的重叠区域不会被重复计算透明度，就能得到你想要的整体半透明效果。

内容的提问来源于stack exchange，提问作者royalBlue