HTML5+CSS on Canvas 3D WebGL (TM) Library

blend Library Method

Short Description: Set transparency values/set up blend animation

Signature: t.blend (f,s,[f1],[s1])
Group: Texture
Class: transition Class

f and s are opacity values for the first and second Texture Canvas. Per default f=1 and s=0, i.e. the texture canvas is fully visible and the alternate canvas is fully transparent i.e. invisible. For general values of s and f the second or Alternate Canvas is painted on top of the first canvas, and so has priority and is shown e.g. if s=1.

The following examples draw the second image on the alternate canvas using"testimg2",null,null,2) and the first image on the texture canvas. Both images are placed in the same position using HTML+CSS.


blend(1,0) shows the first image and blend(0.5,0) shows it transparently. blend(0,1) shows the second image. blend(1,1) has almost the same effect, however if the the image on the second canvas had (semi-)transparent pixels the image on the first canvas would shine through (which is, however, not the case in this example). Using blend(0.5,1) the images of the element on the first texture canvas is shown half transparently.

Instead of using actor you can also use paint to draw the element, paint(1) or just paint() to draw on the texture canvas and paint(2) to draw on the alternate canvas.


If the parameters f1 and s1 are supplied this method creates an animation lineary changing the opacity value of the first canvas from f to f1 and of the second canvas from f to f1.

<div style="border:1px solid black;  width:300px; height:81px; background‑color:green">
   <img src="/pic/PICT0516‑900‑243‑o.jpg" width="300px"
        height="81px" id="testimg3" style="visibility:hidden">
   <img src="/pic/falls‑lower.jpg"   width="300px" 
        height="81px" id="testimg4" style="margintop:‑81px; visibility:hidden">

Examples"testimg3").paint(1,true); taccgl.a("testimg4").paint(2,true).blend(1,0,0,0).start();
RUN"testimg3").paint(); taccgl.a("testimg4").paint(2).blend(0,0,1,0).start();
RUN"testimg3").paint(); taccgl.a("testimg4").paint(2).blend(1,0,1,1).start();
RUN"testimg3").paint(); taccgl.a("testimg4").paint(2).blend(1,0,0,1).start();
RUN"testimg3").paint(); taccgl.a("testimg4").paint(2).blend(1,-2,-2,1).start();
RUN"testimg3").paint(); taccgl.a("testimg4").paint(2).blend(1,0,0.5,0.5).start();

Opacity values range from 0.0 (fully transparent) to 1.0 (fully visible). Values bigger than 1 are set to 1 and values less than 0 are set to 0 before applying the transparency. The animation itself can use values outside the range 0.0 to 1.0 to influence the timing of the animation; however values outside the range -10..10 (exclusive) should not be used and are reserved for future use.

The methods alpha and blend are mutually exclusive, the last one called is taking effect. If possible the simpler alpha method should be used.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transition.texCan - Select texture Canvas
Previous Page: transition.texmove - Texture animation