javascript - 事件发生时如何从html画布图像中删除叠加效果

Question

我想用输入类型颜色事件监听器改变 T 恤颜色。画布上的图像很好。但是，每当用户更改颜色并触发事件时，该颜色的叠加效果就会出现在图像上。我想删除那种叠加效果。我希望图像看起来与起点处的蓝色完全一样，没有覆盖。

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

var x; //drawing context
var width; // canvas width
var height; // canvas height
var fg; //image
var buffer; //inner canvas
var color = '#0000ff'; //default color
function shirtColor(){
  return color;
}
function updateShirtColor(){
  //update value of color
  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');
    // Check the element is in the DOM and the browser supports canvas
    if(drawingCanvas && drawingCanvas.getContext) {
        // Initaliase a 2-dimensional drawing context
        width = drawingCanvas.width;
        height = drawingCanvas.height;
        x = drawingCanvas.getContext('2d');


        // grey box grid for transparency testing
        x.fillStyle = shirtColor();
        x.fillRect(0,0,width,height);
        fg = new Image();
        fg.src = 'https://d1b2zzpxewkr9z.cloudfront.net/images/products/apparel/product_type_1_front.png';

        // create offscreen buffer,
        buffer = document.createElement('canvas');
        buffer.width = fg.width;
        buffer.height = fg.height;
        bx = buffer.getContext('2d');

        // fill offscreen buffer with the tint color
        bx.fillStyle = '#FF';
        bx.fillRect(0,0,buffer.width,buffer.height);

        // destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
        bx.globalCompositeOperation = "destination-atop";
        bx.drawImage(fg,0,0);


        // to tint the image, draw it first
        x.drawImage(fg,0,0);

        //then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
        x.globalAlpha = 0.5;
        x=x.drawImage(buffer,0,0);
    }
}
function draw(){
  updateShirtColor();
  var drawingCanvas = document.getElementById('myDrawing');
  // Check the element is in the DOM and the browser supports canvas
  if(drawingCanvas && drawingCanvas.getContext) {
      // Initaliase a 2-dimensional drawing context
      width = drawingCanvas.width;
      height = drawingCanvas.height;
      x = drawingCanvas.getContext('2d');
      x.clearRect(0, 0,width,height);
      // grey box grid for transparency testing
      x.fillStyle = shirtColor();
      x.fillRect(0,0,width,height);

      fg = new Image();
      fg.src = 'https://d1b2zzpxewkr9z.cloudfront.net/images/products/apparel/product_type_1_front.png';

      // create offscreen buffer,
      buffer.width = fg.width;
      buffer.height = fg.height;
      bx = buffer.getContext('2d');

      // fill offscreen buffer with the tint color
      bx.clearRect(0, 0, buffer.width, buffer.height);
      bx.fillStyle = '#FF';
      bx.fillRect(0,0,buffer.width,buffer.height);

      // destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
      bx.globalCompositeOperation = "destination-atop";
      bx.drawImage(fg,0,0);


      // to tint the image, draw it first
      x.drawImage(fg,0,0);

      //then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
      x.globalAlpha = 0.5;
      x=x.drawImage(buffer,0,0);
  }
}

我希望在发生颜色变化事件后有清晰的图像而没有叠加效果。

标签： javascripthtmlhtml5-canvas

Answer 1

我不太确定这是您要问的。您的代码中有错误。您尝试在图像加载之前绘制图像。我已经将那部分代码包装在fg.onload = function() {....}

您遇到的第二个错误：在函数中draw，每次调用该函数时都会创建一个新图像。你不需要。你已经有了fg变量。就用它。

var x; //drawing context
var width; // canvas width
var height; // canvas height
var fg; //image
var buffer; //inner canvas
var color = "#0000ff"; //default color
function shirtColor() {
  return color;
}
function updateShirtColor() {
  //update value of color
  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");
  // Check the element is in the DOM and the browser supports canvas
  if (drawingCanvas && drawingCanvas.getContext) {
    // Initaliase a 2-dimensional drawing context
    width = drawingCanvas.width;
    height = drawingCanvas.height;
    x = drawingCanvas.getContext("2d");

    // grey box grid for transparency testing
    x.fillStyle = shirtColor();
    x.fillRect(0, 0, width, height);
    fg = new Image();
    fg.src =
      "https://d1b2zzpxewkr9z.cloudfront.net/images/products/apparel/product_type_1_front.png";
    fg.onload = function() {
      // create offscreen buffer,
      buffer = document.createElement("canvas");
      buffer.width = fg.width;
      buffer.height = fg.height;
      bx = buffer.getContext("2d");

      // fill offscreen buffer with the tint color
      bx.fillStyle = "#FF";
      bx.fillRect(0, 0, buffer.width, buffer.height);

      // destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
      bx.globalCompositeOperation = "destination-atop";
      bx.drawImage(fg, 0, 0);

      // to tint the image, draw it first
      x.drawImage(fg, 0, 0);

      //then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
      //x.globalAlpha = 0.5;
      //x=x.drawImage(buffer,0,0);
    };
  }
};
function draw() {
  updateShirtColor();
  var drawingCanvas = document.getElementById("myDrawing");
  // Check the element is in the DOM and the browser supports canvas
  if (drawingCanvas && drawingCanvas.getContext) {
    // Initaliase a 2-dimensional drawing context
    width = drawingCanvas.width;
    height = drawingCanvas.height;
    x = drawingCanvas.getContext("2d");
    x.clearRect(0, 0, width, height);
    // grey box grid for transparency testing
    x.fillStyle = shirtColor();
    x.fillRect(0, 0, width, height);

      // create offscreen buffer,
      buffer.width = fg.width;
      buffer.height = fg.height;
      bx = buffer.getContext("2d");

      // fill offscreen buffer with the tint color
      bx.clearRect(0, 0, buffer.width, buffer.height);
      bx.fillStyle = "#FF";
      bx.fillRect(0, 0, buffer.width, buffer.height);

      // destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
      bx.globalCompositeOperation = "destination-atop";
      bx.drawImage(fg, 0, 0);

      // to tint the image, draw it first
      x.drawImage(fg, 0, 0);

      //then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
      //x.globalAlpha = 0.5;
      //x=x.drawImage(buffer,0,0);
    
  }
}

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