gpt4 book ai didi

javascript - 如何通过ajax每X秒自动更新 Canvas 屏幕?

转载 作者:行者123 更新时间:2023-12-03 12:38:18 30 4
gpt4 key购买 nike

我的任务是创建社交网络

我有一个主页,显示用户通过 Canvas 创建的所有绘图。用户可以在自己的绘图上绘图,并且可以添加也有权在其绘图上绘图的贡献者。问题是他们可以以某种方式同时绘制。

我想做的是,当一个用户绘制 Canvas 图像时,它会为正在观看同一绘图的其他用户更新,而无需刷新页面。

我想指出的是,程序运行良好,唯一的问题是你必须刷新页面才能看到绘图的变化

这是我的客户端代码,我在新绘图之前将先前绘制的图片添加到空 Canvas

canvas = document.getElementById('can');

contain = document.getElementById('contain');
ctx = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = ''+drugi+'/'+prvi+'.png';
imageObj.onload = function() {
ctx.drawImage(this, 0, 0);
};

这是对ajax的请求,以在每次启动draw()函数后保存绘图(即每次在 Canvas 上绘图时移动鼠标)

ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
var dataURL = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'saveimg.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(dataURL );

这是服务器端代码

<?php
session_start();
$crtez = $_SESSION['tmpdrawing'];
$kategorija = $_SESSION['tmpkat'];
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen($kategorija . '/' . $crtez . '.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
?>

现在,当我们有了代码时,我真正想要的是第一个代码,它会更改 Canvas 外观,例如每 3 秒启动一次,以便当前该绘图上的其他用户可以看到图片更新而无需刷新页面。

如果您在客户端需要更多代码,我将发布。

我想再说一遍,该程序运行完美,我唯一需要完成的就是通过ajax自动更新 Canvas

最佳答案

首先,您应该将 javascript 代码包装到函数中,而不是在服务器端发生更改时调用该函数。据我所知,客户端和服务器之间的通信有两个概念:

  1. 服务器池 - 使用 JavaScript,客户端每 X 秒发送一个 HTTP 请求,并在服务器发送一些更新时执行某些操作,例如更新 Canvas 。这是一种“老派”且性能不佳的模式,也许您应该避免它。如果您喜欢《辛普森一家》,就是:Are we there yet看看:Server Pooling Example

  2. Web Socket 通信 - 服务器和客户端之间的全双工通信。当服务器端发生问题时,客户端几乎会立即收到通知。去年,当我从事此类项目时,我在使用 PHP 和 Apache Server 实现 Web 套接字通信时遇到了很多问题,不知道现在是否有更好的办法。但是,在阅读了一些有关实时应用程序开发的书籍后,我用 Pusher 做到了。 ,这是一项商业服务,但也有免费计划。

关于javascript - 如何通过ajax每X秒自动更新 Canvas 屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23630718/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com