2

I am very new in the web world. Please pardon me if my questions sound stupid?

My main aim is to capture the animation on HTML5 canvas to a video, in which I succeeded to some extent. I am able to record a video using this module https://github.com/spite/ccapture.js . This is possible only when the code has HTML5 and plain javascript drawing APIs having a canvas element.

Next, I 've been trying to capture text animations using textillate.js which is jquery based. I have no idea how to get the handle to the canvas in this case. Since jquery is based on javascript, don't all the jquery based animation render on HTML5 canvas?

Here is the example code below. Where in this code can I get the canvas handle and how? There's also no mention of the canvas name.

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <link href="css/animate.css" rel="stylesheet">
      <script src="js/jquery-2.1.3.min.js"></script>
      <script src="js/jquery.lettering.js"></script>
      <script src="js/jquery.textillate.js"></script>
      <script type="text/javascript">
         $( document ).ready(function() {
             $('.tlt').textillate({
                 selector: '.texts',
                 loop: false,
                 minDisplayTime: 2000,
                 initialDelay: 0,
                 in: {
                     effect: 'bounce',
                     delayScale: 2,
                     delay: 50,
                     sync: false,
                     shuffle: true
                 },
                 autoStart: true,
                 inEffects: [],
                 outEffects: [ 'hinge' ]
             });

         });
      </script>
   </head>
   <body>
      <h1 class="tlt">Animate me with textillate effects</h1>
   </body>
</html>
soupybionics
  • 4,200
  • 6
  • 31
  • 43
  • What makes you think `textillate` uses a canvas? It appears to involve only CSS3 and javascript. – Roamer-1888 Mar 14 '15 at 19:15
  • I see. My knowledge in this domain is very very limited. So you mean, there's no way to extract individual frames out of the animation? Also, if it is not using a canvas, then what's the rendering platform it uses? – soupybionics Mar 14 '15 at 20:11
  • Cotiago, I don't know the plugin - just what I've read and seen on its home page. The animations are achieved with CSS3 effects, which, I guess, act directly on DOM elements (probably spans), not a canvas. I would also guess that the plugin does not expose the individual frames through its API. If it did, then that aspect would be described somewhere in the documentation. That's the place to look. – Roamer-1888 Mar 14 '15 at 20:30
  • Thanks Roamer-1888. That helped my limited understanding. I'm kinda getting the whole picture now. – soupybionics Mar 15 '15 at 07:37

1 Answers1

0

If you are looking to getContext, this was already answered here: jQuery equivalent of getting the context of a Canvas. If not, sorry.

Community
  • 1
  • 1
Damian Silva
  • 336
  • 3
  • 19