我正在尝试更改在设置特定 php session 变量时绘制到 Canvas 上的 js 数组的变量。 php 正在与 canvas 元素和 js 分开的 div 中运行。 canvas 和 js 正在从主页运行,并且 php 事件发生在子元素中。我目前正在使用 php 来定义 js 中使用的变量,当设置 session 时,我希望它更新要在 Canvas 中显示的变量。
这是父页面的代码
<?php $colorin = 'rgba(81, 180, 200, 0.5)'; ?>
<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: '<?php echo $colorin ?>',
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 - 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 + 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>
这是从页面加载到主页上的 div 中的代码。
<?php
session_start();
if (isset($_SESSION['userid'])){
$userid = $_SESSION['userid'];
$colorin = 'rgba(81, 180, 200, 0.5)';
echo "
<script>
$(\"#loghold\").hide();
</script>
";
}else{
$colorin = 'rgba(255, 255, 255, 0.5)';
};
echo " ";
?>
我不确定如何执行代码更新,因为 div 正在更新,但父页面显然没有更新。我想更新正在运行的js而不刷新或重新加载整个页面。
(重新加载主页时,它会显示所需的更改)
最佳答案
首先,PHP是一种服务器端语言,而JavaScript运行在客户端浏览器中。这个想法是,PHP 可以为页面的部分或整个 HTML/CSS/JS 部分提供服务。
所以,记住这一点。据我了解,您想更改 DOM元素而无需重新创建 DOM 本身。这意味着您有 2 个选择:
1) 要么使用 AJAX在客户端获取由 Web 服务器提供的 PHP 脚本。 PHP 脚本应使用 JSON 格式的数据字符串回复 AJAX 请求,您将在 AJAX 请求的 success
回调中处理该字符串。
2) 或者您可以使用 WebSocket。一个不错的解释示例是 here .
可能还有其他解决方案,但在我看来,这些解决方案的工作强度最小。希望这有帮助!
更新:
这就是我为您准备的内容:
Web 目录中的两个文件 - one.php
和 two.php
。
one.php
:
// Your code from the first block here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
function checkStuff() {
$.ajax({
url:'/two.php',
type: "POST",
contentType: "application/json",
dataType: "json",
data: "{}",
success: function(data) {
//debugger;
var colorin = data.color;
// apply colorin
var anything = data.anything;
// do whatever you want with anything
},
error: function(data) {
//debugger;
}
});
setTimeout(checkStuff, 3000);
}
setTimeout(checkStuff, 3000);
});
</script>
two.php
:
<?php
session_start();
if (isset($_SESSION['userid'])){
$userid = $_SESSION['userid'];
echo $colorin = json_encode([
'color' => 'rgba(81, 180, 200, 0.5)',
'anything' => 'helloworld'
]);
} else {
echo $colorin = json_encode([
'color' => 'rgba(255, 255, 255, 0.5)',
'anything' => 'anythingYouWant'
]);
}
因此,在 one.php
中,我们生成了 JS,其中每 3 秒执行一次 AJAX 函数,并且根据响应,我们可以对颜色执行某些操作。显然可以随意适应:)
关于javascript - 如何将变量更改推送到事件 Canvas 绘制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38043916/