2016-06-25 13 views
-1

特定のPHPセッション変数の応答が返されたときに実行されているjsスクリプトで定義済みの変数を変更するにはどうすればよいですか?更新されたPHPの応答でjs変数を変更するには

特定のphpセッション変数が設定されている場合、このキャンバスのjs配列内の色を変更する方法を教えてください。私が今使っている方法は、色は変わりますが、アニメーションのスピードを上げるという問題につながります。

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


    }; 

?> 
+1

私はあなたがより多くの詳細を提供する必要があると思います。あなたは何を達成しようとしていますか? – Blieque

+0

は、PHPセッション変数が別のdivに設定されているときから単一の変数を変更しようとしている配列を追加しました –

+1

"PHPセッション変数が別のdivに設定されている場合"はあまり意味がありません。 PHPセッションデータは、ページがサーバーで処理されているとき、または非同期要求が送信され、適切なデータが戻ってきたときに更新できます。その結果、ページが更新される可能性があります。しかし、それはあなたが欲しいものはまだ非常に不明です。 –

答えて

1
<?php $color="yellow"; ?>  <!--define it in php--> 

    <div id="color" data-color= <?php echo $color; ?> ></div> <!--insert it in html--> 

    <script> 
    var color=""; //declare your variable in JS 
    window.onload = function(e) { 
    color=document.getElementById("color").dataset.color;  //redefine the variable's value from the html defined by the php 
    }; 
    </script> 
+0

私は少しこの応答で動作します。私は応答の明快さに感謝します –

+0

または単にvar color = "<?php echo $ color?>"; – grateful

+0

このメソッドを使用しようとしましたが良いです –

関連する問題