HTML5 Canvas 2D Library
 

clip Library Method

Short Description: Select / Clip-To Rectangular Part

Signature: t.clip (x,y,w,h) or (l,b)
Group: Shape
Class: transition Class
 

In most cases, clip is used to animate a rectangular part of the (image of the) element associated with the transition. (x,y) denote the coordinates of the top left corner of the part, w gives the width and h the height.

Examples

var a=taccgl.actor("testimg"); a.clip (a.x0,a.y0,a.wx0/2,a.hy0).start();
RUN
var a=taccgl.actor("testimg"); a.clip (a.x0+a.wx0/4,a.y0,a.wx0/2,a.hy0).rotateMiddle(1,0,0).start();
RUN
var a=taccgl.actor("testimg"); a.clip (a.x0,a.y0,a.wx0/2,a.hy0).rotateMiddle(1,0,0).start();
var b=taccgl.a("testimg"); b.clip (b.x0+b.wx0/2,b.y0,b.wx0/2,b.hy0).rotateMiddle(1,0,0)
.rotatePart(Math.PI*6,Math.PI*2).start();
RUN
Sample HTML Element containing some text.

There is, however, no restriction that reqires the rectangular part to be really completely contained inside the element. In fact (x,y,w,h) can denote any part of the texture canvas and it is the users responsibility to fill it as needed.

In the second form l and b must be Position Specifications and l denotes the top left and b the bottom right corner.

taccgl.actor("htmlel").clip ({ox:11, oy:11}, 300, 200) . dur(3). start();
RUN
taccgl.actor("htmlel").clip ({}, {rx:0.5,ry:1}) . dur(3). start();
RUN
taccgl.actor("htmlel").clip ({}, {rx:0.5,ry:1}) . dur(3). start();
taccgl.actor("htmlel").clip ({rx:0.5}, {rx:1,ry:1}) . rotate ({rx:0},0,1,0) . rotatePart(0,-Math.PI) . dur(3). start();
RUN

clip must be used before most of the other methods, before any of hV, wV, dV, before any of the motion methods and before any of the texture methods.

For non-rectangular parts use clipT or clipR. For triangles, creates right triangles while clipT or clipR create arbitrary triangles.

Next Page:transition.restrict - Select / Clip-To Rectangular Part (depricated name for clip)
Previous Page: transition.depth - Set or Animate Depth of Object