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.


var"testimg"); a.clip (a.x0,a.y0,a.wx0/2,a.hy0).start();
var"testimg"); a.clip (a.x0+a.wx0/4,a.y0,a.wx0/2,a.hy0).rotateMiddle(1,0,0).start();
var"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)
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."htmlel").clip ({ox:11, oy:11}, 300, 200) . dur(3). start();
RUN"htmlel").clip ({}, {rx:0.5,ry:1}) . dur(3). start();
RUN"htmlel").clip ({}, {rx:0.5,ry:1}) . dur(3). start();"htmlel").clip ({rx:0.5}, {rx:1,ry:1}) . rotate ({rx:0},0,1,0) . rotatePart(0,-Math.PI) . dur(3). start();

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