我有一个画布项目，其中有几个变量决定了我生成的"粒子"的速度。我有它的设置，以便当你登录画布更新和改变颜色(基本上我使用一个php会话变量来重申js代码的画布改变它的几个变量)我使用ajax重新加载页面与主页面内的画布(所以整个页面不重新加载)。当它通过ajax重新加载画布页面时，粒子的速度会增加。当我用重新加载按钮重新加载时，它不会增加。是否有一种方法来重置在ajax之间的画布(我曾尝试使用canvas.delete("所有");和canvas.delete("速度");但每次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>";
将页面更改为在会话条件之外使用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> ";
}
?>