更新canvas元素而不刷新页面

I have a question and I have been trying everything but just cant crack it. .I have set my HTML5 canvas up to send coordinates, objects etc to a database and then when that canvas is reloaded it (page refresh) it reloads all of the objects with the correct coordinates. .however what I'm trying to achieve is the canvas to update without page refresh every x seconds to show changes etc for example someone else adds something to the canvas everyone will see the change without page refresh so all users are seeing the same thing?

Thanks in advance for any help?

Okay im adding to this post, here is a simple code example of my problem, this all works fine and the var even updated fine when showing in the alert that I have put in however the canvas does now show the changes down below? all the getvars.php file is doing is echo 'Im coming from getvars scripts!';

`<!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>`

is there something I need to add to make the canvas update as the alert is showing the var is updating from the getvars.php when I change it just the canvas stays the same? argh its driving me mad! Thanks in advance for any help you might be able to give?

duanqinjiao5244
duanqinjiao5244 好吧我已经做了一个简单的问题示例,一切正常,变量甚至通过我放入的警报正确更新但画布不更新?我现在用代码示例更新了上面的问题
接近 7 年之前 回复
douyunhuan9886
douyunhuan9886 WebSockets是另一种方式,在这种情况下可能是比ajax更好的解决方案,因为事件来自服务器到客户端,而不是相反。
接近 7 年之前 回复
dpgbh20688
dpgbh20688 您应该使用ajax作为@Goikiu已经建议。使用ajax发出请求,并解析响应以相应地更新画布抽屉。
接近 7 年之前 回复
dongmi5177
dongmi5177 Ajax就是这样。
接近 7 年之前 回复
dongwenyou4298
dongwenyou4298 只是分享代码...............
接近 7 年之前 回复

2个回答



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

展开原文

原文

Put your drawing code inside a .done handler on your jquery ajax call.

dongqiancui9194
dongqiancui9194 很高兴你把事情解决了。 不,您的帖子不需要进一步 - 只是享受您的成功。 干杯!
接近 7 年之前 回复
duan4369
duan4369 too long
接近 7 年之前 回复
dpgua04022
dpgua04022 是的,这就是.done回调的用途。 当你使用$ .ajax进行ajax调用时,jquery会在成功收到响应后执行.done中的代码。 看看它是如何工作的:api.jquery.com/jquery.ajax祝你的项目顺利!
接近 7 年之前 回复
douyou8266
douyou8266 too long
接近 7 年之前 回复



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

有不同的技术可以实现这一目标。</ p>

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

另一个是 WebSockets ,允许服务器将从一个客户端收到的消息实时广播给其他客户端。</ p> \ n

两者都需要服务器端编程。</ p>
</ div>

展开原文

原文

When you want your users to be able to collaborate in real-time, you need some way to have real-time communication between the clients and the server.

There are different technologies to achieve this.

One is xmlHttpRequest, also known as AJAX. You could use it to poll the server at regular intervals to check if the other clients drew something, and then repeat their drawing operations on the local canvas.

Another are WebSockets which allow the server to broadcast messages received from one client to the others in real-time.

Both require server-sided programming.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐