Question

我有一个简单的rails应用程序在哪里运行一些javascript代码，为画布着色并创建偏移的动画颜色渐变：

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var magenta = "#FF5157";
    var yellow = "#FFC159";
    var blue = "#00BADD";


    var height = self.innerHeight;
    var width = self.innerWidth;
    canvas.width = width;
    canvas.height = height;

    var totalOffset = 0;

    Number.prototype.mod = function(n) {
        return ((this%n)+n)%n;
    }

    firstColorOffset = 0;
    secondColorOffset = 0.5;
    thirdColorOffset = 1;
    fourthColorOffset = 1.5;

    var firstColor = magenta;
    var secondColor = yellow;
    var thirdColor = blue;
    var fourthColor = firstColor;

    var drawGradient = function(offset) {
        totalOffset += offset;
        context.clearRect(0, 0, width, height);
        var gradient = context.createLinearGradient(0-totalOffset, 0, (width * 2)-totalOffset, 0);
        if (firstColorOffset <= 1)
            gradient.addColorStop(firstColorOffset, firstColor);

        if (secondColorOffset <= 1)
            gradient.addColorStop(secondColorOffset, secondColor);

        if (thirdColorOffset <= 1)
            gradient.addColorStop(thirdColorOffset, thirdColor);

        if (fourthColorOffset <= 1)
            gradient.addColorStop(fourthColorOffset, fourthColor);

        if (totalOffset > (width)) {
            firstColorOffset = (firstColorOffset - 0.5).mod(1.5);
            secondColorOffset = (secondColorOffset - 0.5).mod(1.5);
            thirdColorOffset = (thirdColorOffset - 0.5).mod(1.5);
            fourthColorOffset = (fourthColorOffset - 0.5).mod(1.5);
            totalOffset = 0;
        }

        context.fillStyle = gradient;
        context.fillRect(0, 0, width, height);
    }



    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var start = null
    var animate = function(timestamp) {
        var delta;
        if (start === null) start = timestamp;
        delta = timestamp - start;
        drawGradient(delta / 5);
        if (delta < 2000) {
            requestAnimationFrame(animate);
        }
        start = timestamp;
    }
    requestAnimationFrame(animate);

    window.onresize = function() {
        width = self.innerWidth;
        height = self.innerHeight;
        canvas.width = width;
        canvas.height = height;
    }

    window.onfocus = function() {requestAnimationFrame(animate)};
    $(document).ready(window.onfocus);
    $(document).on('page:load', window.onfocus);

这里有文档： https://github.com/rails/turbolinks

我尝试使用：

    window.onfocus = function() {requestAnimationFrame(animate)};
    $(document).ready(window.onfocus);
    $(document).on('page:load', window.onfocus);

原则上的问题是，无论何时我点击页面上的某个turbolinks，都会重新应用javascript并重新开始渐变动画...我想让它无缝连接并继续循环而不用＆＃39 ;重新启动＆＃39;

我已尝试将脚本移到页面底部...这是我的application.html.erb：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>

    <%= stylesheet_link_tag    "application" %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>

  <body>        
    <canvas id="canvas">
    </canvas>
    <header class="navbar navbar-fixed-top navbar-inverse">
    <%= link_to image_tag "logo4.png", id: "luhgo" %>
      <div class="container">
        <nav>
        <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "About", root_path %></li>
            <li><%= link_to "Music", music_path %></li>
            <li><%= link_to "Projects", projects_path %></li>
            <li><%= link_to "Contact", contact_path %></li>
        </ul>
        </nav>
      </div>
    </header>


    <div class="container">
      <%= yield %>
    </div>

  </body>

<%= javascript_include_tag "glow" %>

</html>

Rails 4使TurboLinks之间的Javascript持久化

0 个答案: