javascript - 如何改变使用jQuery的动画速度？

Question

我对 JS 比较陌生，对<canvas>元素比较陌生。

所以，我有一个画布可以生成一个旋转的星星背景，我只是想在延迟后降低速度。我已经尝试了几种方法来定位价值，但我似乎无法得到任何回应。

我意识到画布元素需要重新绘制，但由于星星已经在旋转，我想它已经在不断更新。如果我确实需要重绘，如果我无法检查画布，我该如何确定目标？

原始 JavaScript 文件（WordPress 插件的一部分，因此不应编辑）

    function gravityBackgroundEffect() {
            
            function Constellation (canvas, options) {
                
                var screenpointSplitt = 14000,
                    viewportWidth = $(".grcs_background_content .level-1").width(),
                    viewportHeight = $(".grcs_background_content .level-1").height(),
                    particleRecalculated = Math.round( viewportWidth * viewportHeight / 24000 * ( background_particle_effect_particle_amount / 100 ) ),
                    
                    $canvas = $(canvas),
                    context = canvas.getContext("2d"),
                    defaults = {
                        star: {color: background_particle_effect_particle_color, width: 1},
                        line: {color: background_particle_effect_line_color, width: 0.2},
                        position: {x: 0,y: 0},
                        width: viewportWidth,
                        height: viewportHeight,
                        velocity: background_particle_effect_particle_speed / 50,
                        length: particleRecalculated,
                        distance: 120,
                        radius: background_particle_effect_activation_radius,
                        stars: []
                    },
                    
                    config = $.extend(true, {}, defaults, options);
        
                function Star () {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.vx = (config.velocity - (Math.random() * 0.5));
                    this.vy = (config.velocity - (Math.random() * 0.5));
                    this.radius = Math.random() * config.star.width;
                }
...

单独的 JavaScript 文件（第一次尝试）

我试图定位“速度”值并在 5 秒延迟后更新它。

jQuery(document).ready(function( $ ){

  var delayInMilliseconds = 5000;
  var velocity = 10;

    setTimeout(function() {
        $("canvas").attr("velocity", velocity);
    }, delayInMilliseconds);

});

单独的 JavaScript 文件（第二次尝试）

考虑到作为“默认”的子/值（？），我想也许我需要以“默认”为目标并更新其所有值。

jQuery(document).ready(function( $ ){

  var delayInMilliseconds = 5000;

  setTimeout(function() {
      $("canvas").attr("defaults", star: {color: background_particle_effect_particle_color, width: 1}, line: {color: background_particle_effect_line_color, width: 0.2}, position: {x: 0,y: 0}, width: viewportWidth, height: viewportHeight, velocity: background_particle_effect_particle_speed / 10, length: particleRecalculated, distance: 120, radius: background_particle_effect_activation_radius, stars: []);
  }, delayInMilliseconds);
  
}

我还认为原始画布可能会很快将自身更新回原始值，以至于我看不到我的更新，但是，为我的自定义 JS 设置 1 毫秒的间隔也没有产生任何结果。

我没有收到任何控制台错误 - 但什么也没发生。我也尝试编辑其他一些值无济于事。任何帮助将不胜感激！

标签： javascriptjquerycanvas