HTML5 Canvas 2D Library

Basic JavaScript Embedding - taccGL Library Tutorial

This begin of this tutorial page is intended for HTML/CSS Developers who just do a little bit of javaScript. For javaScript software developers / we refer recomment to skip these.

Using Functions

Definitions of animations in taccgl™ are just JavaScript programs. However, just a small subset of javascript features is needed to create nice animations, e.g. most of the examples in the tutorial so far just contain method calls with constant parameters. We, however, recommend to put animations into javaScript function definitions (as shown in the second example of the First Example page.

In the First Example we entered the animation directly into an a-tag like

<a href="javascript:'myel').rotateMiddle(0,1,0).start(); taccgl.start()">Run</a> 
This works great, as long as the green code is small and does not contain double quotes ("").

An alternative form is

<a href="javascript: myanimation(); ">Run</a>  
<script >
function myanimation() {'myel').rotateMiddle(0,1,0).start();
This is much better for longer definitions, since you can use multiple lines, indentation and double quotes.


almost empty element with id="ex10"

Since taccgl™ animations are just JavaScript programs, you can also use expressions as parameters, which are evaluated by javaScript. In the example below we want to position the image in the upper left half of the box. Since the css defined the box is 200px wide and 100px high, we could have written resize(100,50). However, we used resize(200/2,100/2), which means the same but more clearly documents the calculation."testimg").position({el:"ex10"}).resize(200/2,100/2).dur(3).start()RUN

The next example defines a transition named t but does not yet use start (1st line). Then it uses attributes t.x and t.y of t. These give the position of the underlying HTML element (testimg in this case) in pixels from the documents top left.

var"ex10"); (t.x, t.y+500, 0).start();

The parameters for to are expressions t.x and t.y+500. This means the destination x-coordinate is identical to the x coordinate of the HTML element itself. So the object moves just top-down, leaving x-coordinate constant. For y it uses t.y+500. This means the object moves 500 pixels down. This simple example could be done by specifying to-position to({oy:500}, however, javaScript expressions can be much more complex.

Note: you always need to finish the JavaScript assignment t= before you can access the new transition via the variable t and its attributes.

Event Handlers

green element with id="ex30blue" and onclick event handler
green element with id="ex30green" and onclick event handler


You can also start animations using JavaScript event handlers. The green example demonstrates onclick, click on the green surface to start the animation.


The blue example uses onmouseover and onmouseout. Hover with the mouse over the blue surface. Here the animation is not running for a fixed duration, but for the time the mouse is hovering. So the animation uses perm to run potentially for ever and calls stop to stop the animation onmouseout. In fact the animation has two transitions, a first one that moves the element and a second element made with cont to show the element in its destination. It is important not to use actor in this case, but a in combination with opacityAtBegin and opacityAtEnd. actor hides the element while running the animation, which would trigger the onmouseout immediately (since the browser thinks the element is gone). Instead the combination of opacityAtBegin and opacityAtEnd just makes the element transparent while the animation is running.

<div onclick="myanimation();">...\/div>"ex30green").to({ox:-1000,oy:-1000,z:-3000}).dur(3).start(); RUN
<div onmouseover="myanimation();">Button</div> 
taccgl.stop() RUN
<body onload="myanimation();"> ... </body> 


Also the onload event handler is very useful. It plays an animation immediatly after the page and all required images and other documents are loaded.

Currently we very much recommend to use onload instead of other methods for starting an animation after loading a page. There are ways to starts scripts earlier before everything has been loaded. This can be quite desirable, if your page loads some stuff slowly, e.g. big images. However, note that animations might need the images and will not work while the required images are still loading, so it can be very error prone to start animations early.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:External 3D Models
Previous Page: Boxes
Please Add a Comment or Question, click here!