HTML5 Canvas Library
 

clipTo Library Method

Short Description: Animate Clipping - Set Rectangular End Point

Signature: t.clipTo (x,y,w,h) or (l,b)
Group: Shape
Class: transition Class
 
Sample HTML Element containing some text.

The parameters have the same meaning as with clip. The methods sets the end point of a clipping animation.

A clipping animation at the begin clips a certain part of the element and at the end another part. Both are set with clipFrom and clipTo. If either is missing, it defaults to the complete element or the part previously selected e.g. with clip.

taccgl.actor("htmlel5").clipTo ({},1,1) . dur(3). start();
RUN
taccgl.actor("htmlel5").clipTo ({rx:1},1,1) . dur(3). start();
RUN
taccgl.actor("htmlel5").clipTo ({},0,0) . dur(3). start();
RUN
taccgl.actor("htmlel5").clipTo ({}, {rx:0.5,ry:1}).clipTo ({rx:0.5}, {rx:1,ry:1}) . dur(3). start();
RUN
taccgl.actor("htmlel5").clipTo ({rx:-0.5}, {rx:0,ry:1}).clipTo ({rx:1}, {rx:1.5,ry:1}) . dur(3). start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transition.clipT - Select Part / Clip-To Part using three points
Previous Page: transition.clipFrom - Animate Clipping - Set Rectangular Starting Point