舞台

4. 画布

4.12. 混合像素模式


blendMode()

示例:

▶️运行示例代码



function setup(){
  blendMode(LIGHTEST);
  strokeWeight(30);
  stroke('#3366ff');
  line(25,25,75,75);
  stroke('#ff0000');
  line(75,25,25,75);
};

舞台区显示的画布内容如下:


示例:

▶️运行示例代码



function setup(){
  blendMode(MULTIPLY);
  strokeWeight(30);
  stroke('#3366ff');
  line(25,25,75,75);
  stroke('#ff0000');
  line(75,25,25,75);
};

舞台区显示的画布内容如下:

Description

Blends the pixels in the display window according to the defined mode. There is a choice of the following modes to blend the source pixels (A) with the ones of pixels already in the display window (B):

  • BLEND - linear interpolation of colours: C = A*factor + B. This is the default blending mode.
  • ADD - sum of A and B
  • DARKEST - only the darkest colour succeeds: C = min(A*factor, B).
  • LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B).
  • DIFFERENCE - subtract colors from underlying image.
  • EXCLUSION - similar to DIFFERENCE, but less extreme.
  • MULTIPLY - multiply the colors, result will always be darker.
  • SCREEN - opposite multiply, uses inverse values of the colors.
  • REPLACE - the pixels entirely replace the others and don't utilize alpha (transparency) values.
  • REMOVE - removes pixels from B with the alpha strength of A.
  • OVERLAY - mix of MULTIPLY and SCREEN . Multiplies dark values, and screens light values. (2D)
  • HARD_LIGHT - SCREEN when greater than 50% gray, MULTIPLY when lower. (2D)
  • SOFT_LIGHT - mix of DARKEST and LIGHTEST. Works like OVERLAY, but not as harsh. (2D)
  • DODGE - lightens light tones and increases contrast, ignores darks. (2D)
  • BURN - darker areas are applied, increasing contrast, ignores lights. (2D)
  • SUBTRACT - remainder of A and B (3D)

(2D) indicates that this blend mode only works in the 2D renderer.
(3D) indicates that this blend mode only works in the WEBGL renderer.

Syntax

blendMode(mode)

Parameters

  • mode
     
    Constant: 

    blend mode to set for canvas. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT