Question

我有一个问题，我一直在尝试一切，但只是不能破解它。我已经设置了我的HTML5画布以将坐标，对象等发送到数据库，然后当重新加载该画布（页面刷新）时，它将使用正确的坐标重新加载所有对象。。然而，我想要实现的是画布更新，没有页面刷新每x秒显示更改等例如其他人向画布添加一些东西每个人都会看到更改没有页面刷新所以所有用户都看到相同的东西？

提前感谢您的帮助吗？

好的我正在添加到这篇文章，这里是我的问题的一个简单的代码示例，这一切都运行良好，var甚至在我放入的警报中显示时更新，但画布现在显示下面的更改？所有getvars.php文件都是echo'我来自getvars脚本！';

`<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{ margin:10px; background:#666; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>

$(function() {getStatus();});
function getStatus() {  
greg = $.ajax({
url: "getvars.php",
async: false
}).responseText;
setTimeout("getStatus()",10000);

function draw(){
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.fillStyle = 'black';
ctx.font = 'italic bold 60px Arial, sans-serif';
ctx.fillText(greg, 50, 50, 300);}   
window.alert(greg) 
window.onload = draw;}
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="350"></canvas>
</body>  
</html>`

是否需要添加一些内容以使画布更新，因为警报显示var正在从getvars.php更新，当我更改它时，画布保持不变？它让我疯了！在此先感谢你能给予的任何帮助吗？

Answer 1

当您希望用户能够实时协作时，您需要一些方法在客户端和服务器之间进行实时通信。

有不同的技术可以实现这一目标。

一个是xmlHttpRequest，也称为AJAX。您可以使用它定期轮询服务器以检查其他客户端是否绘制了某些内容，然后在本地画布上重复绘制操作。

另一个是WebSockets，它允许服务器实时地将从一个客户端接收的消息广播给其他客户端。

两者都需要服务器端编程。

Answer 2

将您的绘图代码放在jquery ajax调用的.done处理程序中。

更新canvas元素而不刷新页面

2 个答案: