Html5 Canvas Preliminary Study Notes (7) -Synthesis

This article introduces the other two drawn state values, namely the global alpha value and the synthesis operation. First, let’s look at the global alpha value

The global alpha value is very simple, it is our# The difference between the "a" value in ##argb is that the global alpha value must be in 0.0 (fully transparent) to 1.0 (fully transparent), corresponding to the # of the previously mentioned "a" value ##0 to 255, the default value is 1.0. The following code will achieve the following effect:

context.fillStyle = "red";
context.save();
context.globalAlpha = 0.5;
context.fillRect(50,50,100,100);
context.restore();
context.fillRect(200,50,100,100);

restore, due to calling save retains the #red value of fillStyle, so what is drawn is semi-transparent red Square and opaque red square. The composition operation is also a state value

globalCompositeOperation

, defining its different values ​​will complete some operations, mainly the source graphics (definition globalCompositeOperation The drawing context before) and the target graphics (the drawing context after defining globalCompositeOperation)First look at this code, The following effect will be achieved

context.fillStyle = "red";
context.globalCompositeOperation = "source-over";
context.fillRect(50,50,100,100);
context.fillStyle = "blue";
context.fillRect(100,100,100,100);

The following introduces the effects corresponding to the values ​​of globalCompositeOperation

："destination-over"：

Some values ​​are currently not supported by
chrome

browsers and need to be stipulated by the specifications

The above are the Html5 Canvas preliminary study notes (7) - synthesized content , for more related content, please pay attention to the PHP Chinese website (www.php.cn)!