如何使用 jquery 时获取 HTML5 画布

How to get the HTML5 canvas when using jquery?

本文关键字：HTML5 画布 获取 何使用 jquery      更新时间：2023-09-26

我在网络世界里很陌生。如果我的问题听起来很愚蠢，请原谅我？

我

的主要目标是将HTML5画布上的动画捕获到视频中，我在某种程度上取得了成功。我能够使用此模块录制视频 https://github.com/spite/ccapture.js.仅当代码具有具有 HTML5 和具有 canvas 元素的纯 JavaScript 绘图 API 时，这才有可能。

接下来，我一直在尝试使用基于jquery的textillate捕获文本动画.js这是基于textillate的。我不知道如何获得画布的手柄在这种情况下。既然jquery是基于javascript的，那么所有基于jquery的动画不是都在HTML5画布上渲染的吗？

下面是下面的示例代码。在此代码中的何处可以获得画布句柄以及如何获取？也没有提到画布名称。

<!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>

如果你正在寻找getContext，这里已经回答了这个问题：jQuery相当于获取Canvas的上下文。如果没有，对不起。

相关文章：