キャンバスの「パーティクル」は、AJAXのリロード時にスピードを増やす

Question

私は生成している「パーティクル」のスピードを決定するいくつかの変数を持つキャンバスアイテムを持っています。私はあなたがキャンバスの更新と色の変更（基本的に私はそれをいくつかの変数を変更するキャンバスのjsコードをreitterateするためにPHPのセッション変数を使用している）にログインするときに私はそれを設定している私はajaxを使用してページをリロードするメインページ内のキャンバス（ページ全体がリロードされないように）キャンバスページをajax経由でリロードすると、パーティクルの速度が上がります。リロードボタンを使用してリロードすると、リロードボタンは増加しません。私はcanvas.delete（ "all"）とcanvas.delete（ "speed"）を使ってみましたが、ajaxのリロードごとにキャンバスパーティクルを高速化しています。任意のアイデア？phpの

でここ

私が作成したとして働いていますキャンバスのフォークです。

<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>   
      ";   


    }; 

?> 

アヤックス

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> "; 
    } 
    ?>