Question

我有一个画布项目，它有几个变量来决定我正在生成的“粒子”的速度。我有它设置，以便当您登录画布更新并更改颜色（基本上我使用php会话变量来重新输入画布的js代码以更改它上面的一些变量）我使用ajax重新加载页面主页面内的画布（因此整个页面不会重新加载）。当它通过ajax重新加载画布页面时，粒子的速度会增加。当我使用重新加载按钮重新加载时，它不会增加。有没有办法在ajax之间重置画布（我尝试过使用canvas.delete（“all”）;和canvas.delete（“speed”）;但它继续加速每次ajax重新加载画布粒子。有什么想法吗？

这是我创建并正在使用的画布分支。

<div id="isohold">  
<canvas id="iso"></canvas>
<div id="loghold">Login</div>
</div>   

  <?php
    session_start();                
    //3.1.4 if the user is logged in Greets the user with message
    if (isset($_SESSION['userid'])){
    $userid = $_SESSION['userid'];


    echo " <script>

'use strict';


var rn = function rn(min, max) {
    return Math.random() * (max - min) + min;
};
var ctx = iso.getContext('2d');

var _window = window;
var w = _window.innerWidth;
var h = _window.innerHeight;

var t = 10;
var arr = [];
var cn = 200;
var rad = 300;
var sp = rn(1, 5) / 10000;
iso.width = w;
iso.height = h;

while (~ ~ cn--) {
    var angle = rn(110, 359);

    arr = [].concat(arr, [{
        color: 'rgba(81, 180, 200, 0.5)',
        distortion: rn(15, 75),
        tmod: rn(5, 10),
        size: rn(15, 20),
        speed: 0.0005,
        angle: angle,
        lastPos: {
            x: w / 2,
            y: h / 2
        }
    }]);
}

var draw = function draw() {
    request = requestAnimationFrame(function () {
        return draw();
    });
    t++;

    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'rgba(0, 0, 0,.1)';
    ctx.fillRect(0, 0, w, h);

    var crad = rad * Math.sin(300);

    ctx.globalCompositeOperation = 'lighter';
    arr.forEach(function (el) {
        ctx.strokeStyle = el.color;
        ctx.lineWidth = el.size;
        ctx.beginPath();

        var lastPos = el.angle - 0.0005;
        var x = w / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.cos(el.angle * 180 / Math.PI);
        var y = h / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.sin(el.angle * 180 / Math.PI);

        ctx.moveTo(el.lastPos.x, el.lastPos.y);
        ctx.lineTo(x, y);

        el.lastPos = { x: x, y: y };
        el.angle = (el.angle + 0.0005) % 359;
        ctx.stroke();
    });
};

var resize = function resize() {
    iso.width = w = window.innerWidth;
    iso.height = h = window.innerHeight;
};

var request = requestAnimationFrame(function () {
    return draw();
});
window.addEventListener('resize', function () {
    return resize();
});

</script>    
<script>
                 $(\"#loghold\").hide();   
</script>       
            ";
    }else{
    echo "<script>

'use strict';

var rn = function rn(min, max) {
    return Math.random() * (max - min) + min;
};
var ctx = iso.getContext('2d');

var _window = window;
var w = _window.innerWidth;
var h = _window.innerHeight;

var t = 10;
var arr = [];
var cn = 200;
var rad = 300;

iso.width = w;
iso.height = h;

while (~ ~ cn--) {
    var angle = rn(110, 359);

    arr = [].concat(arr, [{
        color: 'rgba(255, 255, 255, 0.5)',
        distortion: rn(15, 75),
        tmod: rn(5, 10),
        size: rn(15, 20),
        speed: rn(1, 5) / 5000,
        angle: angle,
        lastPos: {
            x: w / 2,
            y: h / 2
        }
    }]);
}

var draw = function draw() {
    request = requestAnimationFrame(function () {
        return draw();
    });
    t++;

    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'rgba(0, 0, 0,.1)';
    ctx.fillRect(0, 0, w, h);

    var crad = rad * Math.sin(300);

    ctx.globalCompositeOperation = 'lighter';
    arr.forEach(function (el) {
        ctx.strokeStyle = el.color;
        ctx.lineWidth = el.size;
        ctx.beginPath();

        var lastPos = el.angle - el.speed;
        var x = w / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.cos(el.angle * 180 / Math.PI);
        var y = h / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.sin(el.angle * 180 / Math.PI);

        ctx.moveTo(el.lastPos.x, el.lastPos.y);
        ctx.lineTo(x, y);

        el.lastPos = { x: x, y: y };
        el.angle = (el.angle + el.speed) % 359;
        ctx.stroke();
    });
};

var resize = function resize() {
    iso.width = w = window.innerWidth;
    iso.height = h = window.innerHeight;
};

var request = requestAnimationFrame(function () {
    return draw();
});
window.addEventListener('resize', function () {
    return resize();
});

</script>          
            ";           


  };

 ?>

ajax in php

 echo "  <script>


    $(\"#isoholder\").load(\"/iso/iso.php\");     


 </script>";

Answer 1

将页面更改为在会话条件之外使用动画的javascript，并在会话代码中通过您登录的全局变量标记

  ... page data
  <script>
    // the following var must be global to the page.
    var sessionLoggedIn = false; // use this to determine the colours to use
    // the code to do the animation
    ...
    function draw(){
       if(sessionLoggedIn){ // if true then logged in 

       }else{ // not logged in

       }

    }
  </script>
  <?php
    session_start();                
    if (isset($_SESSION['userid'])){
        $userid = $_SESSION['userid'];
        echo " <script> sessionLoggedIn = true;</script> ";
    }else{
        echo "<script> sessionLoggedIn = false;</script> ";
    }
  ?>

画布“粒子”在ajax重载上增加速度

1 个答案: