如何移除HTML Canvas中T恤颜色切换事件触发时的叠加效果

我来帮你搞定这个T恤颜色切换的叠加问题！你遇到的核心问题是代码里存在几个关键的小错误，导致每次切换颜色时都会残留上一次的绘制痕迹或者出现绘制逻辑异常，咱们一步步修正：

问题根源分析 #

• 无效的颜色值：你在buffer填充时用了#FF，这是不合法的颜色格式，根本起不到正确的着色作用
• 重复创建图片实例+无加载等待：每次调用draw()都新建fg图片，还没等图片加载完就绘制，会导致绘制异常
• 错误的上下文赋值：x=x.drawImage(buffer,0,0);这行完全错误，drawImage没有返回值，会把绘图上下文x变成undefined
• 全局透明度未重置：每次绘制后没把globalAlpha恢复为1，导致后续叠加效果越来越明显
• buffer重复初始化：没必要每次绘制都重新设置buffer的宽高，复用即可

修正后的完整代码 #

<input id="selectedColor" type="color" value="#0000ff"> 
<canvas id="myDrawing" width="530" height="600"></canvas>

<script>
var x; // 主绘图上下文
var width; // canvas宽度
var height; // canvas高度
var fg; // T恤图片实例
var buffer; // 离屏buffer
var bx; // buffer的绘图上下文
var color = '#0000ff'; // 默认颜色

function shirtColor(){ 
    return color; 
}

function updateShirtColor(){
    // 更新选中的颜色
    var currentColor = document.getElementById('selectedColor').value;
    color = currentColor;
}

window.onload = function() {
    var myColor = document.getElementById('selectedColor');
    myColor.addEventListener('change', draw);

    var drawingCanvas = document.getElementById('myDrawing');
    if(drawingCanvas && drawingCanvas.getContext) {
        width = drawingCanvas.width;
        height = drawingCanvas.height;
        x = drawingCanvas.getContext('2d');

        // 预加载T恤图片，只加载一次
        fg = new Image();
        fg.onload = function() {
            // 初始化离屏buffer，只做一次
            buffer = document.createElement('canvas');
            buffer.width = fg.width;
            buffer.height = fg.height;
            bx = buffer.getContext('2d');
            
            // 第一次绘制初始颜色
            draw();
        };
        fg.src = 'https://d1b2zzpxewkr9z.cloudfront.net/images/products/apparel/product_type_1_front.png';
    }
}

function draw(){
    updateShirtColor();
    
    // 清空主canvas，彻底清除上一次的绘制内容
    x.clearRect(0, 0, width, height);
    
    // 填充背景色
    x.fillStyle = shirtColor();
    x.fillRect(0,0,width,height);

    // 重置buffer内容
    bx.clearRect(0, 0, buffer.width, buffer.height);
    // 用当前选中的颜色填充buffer
    bx.fillStyle = color;
    bx.fillRect(0,0,buffer.width,buffer.height);
    
    // 使用混合模式让颜色只作用在T恤区域
    bx.globalCompositeOperation = "destination-atop";
    bx.drawImage(fg,0,0);
    
    // 重置全局透明度为默认值1
    x.globalAlpha = 1;
    // 绘制着色后的T恤
    x.drawImage(buffer, 0, 0);
}
</script>

关键修改说明 #

1. 预加载图片：把图片加载放在window.onload里，只加载一次，等图片加载完成后再初始化buffer和第一次绘制
2. 修复颜色值：把buffer的fillStyle改成当前选中的color变量，不再用无效的#FF
3. 移除错误赋值：删掉x=x.drawImage(...)这行错误代码
4. 重置全局透明度：每次绘制前把globalAlpha设回1，避免叠加
5. 复用buffer：只初始化一次buffer，每次绘制前清空buffer内容即可

这样修改后，每次切换颜色时，canvas都会被彻底清空，然后重新绘制背景色和着色后的T恤，完全不会有叠加效果啦！

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