html5不用reload重置网页,如何通过服务器推送动态更新HTML5画布而无需重新加载页面？(how to dynamically update HTML5 canvas via server p...

如何通过服务器推送动态更新HTML5画布而无需重新加载页面？(how to dynamically update HTML5 canvas via server push without page reload?)

我想要做的是创建一个显示网络地图的画布。 这不是一个真正的网络地图，但就解释它而言，网络地图示例最好不会让您陷入与我的问题无关的细节。

在网络地图上，我想显示流量所需的路线。 这些路线随时间变化，有时频繁变化，每分钟多次。 在服务器端，我有一个日志文件，每次路由更改都会附加到该日志文件中。

我知道如何创建画布，我知道如何在画布上绘制路线。

是否可以让服务器在不需要页面重新加载/刷新的情况下将更新推送到画布，基本上根本不需要用户交互？ 绘制的路线只是自动改变？

这需要在IIS上工作，因此需要基于jscript或.Net的解决方案。 我将无法安装PHP，Python，Ruby等。

提前感谢您提供的任何见解。

What I would like to do is create a canvas that will show a network map. It's not really a network map but in terms of explaining it the network map example works best to not bog you down with details that don't pertain to my question.

On the network map I want to display routes the traffic takes. These routes change in time, sometimes as frequently as multiple times per minute. On the server side I have a log file to which each route change is appended as it happens.

I know how to create the canvas, I know how to draw my routes onto the canvas.

Is it possible to have the server push an update to the canvas without requiring a page reload/refresh, essentially requiring no user interaction at all? The routes drawn just automagically change?

This would need to work on IIS so a jscript or .Net based solution would be necessary. I won't be able to install PHP, Python, Ruby etc.

Thanks in advance for any insights you can provide.

原文：https://stackoverflow.com/questions/7262421

更新时间：2020-01-06 13:15

最满意答案

我建议您查看WebSockets解决方案，将信息从服务器推送到客户端(JavaScript)。 收到更新后，您可以根据需要更新画布。

如果您首选的服务器技术是.NET，那么您应该看看的技术将是像我这样的Pusher服务，以及我们的.NET API ，它允许您通过我们的REST API将更新推送到客户端。

如果您希望托管自己的实时基础架构，那么您可以查看与IIS和XSocket集成的WebSync (实际上是Comet技术)。 本指南中还有许多实时技术可能会让您感兴趣。 如果您有任何其他问题，请告诉我。

I recommend that you look at a WebSockets solution to push the information from the server to the client (JavaScript). When you receive the update you can update the canvas as required.

Technologies you should look at if your preferred server technology is .NET would be a service like Pusher, who I work for, and our .NET APIs which let you push updates to the client via our REST API.

If you would prefer to host your own realtime infrastructure then you could look at WebSync (which is actually a Comet technology) which integrates with IIS and also XSockets. There are also a number of realtime technologies on this guide which may interest you. If you've any further questions just let me know.

相关问答

有很多方法可以调用drawImage 一个是： ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 其中dx，dy，dw，dh是目标x，y，宽度和高度。 如果您使dw和dh始终为800x600，则绘制的图像将始终自动缩放到800x600。 这是一个很小的例子，总是将任意大小的图像绘制到800x600 http://jsfiddle.net/jAT8Y/ There are many ways to call drawImage One is:

...

这是一个如何实现你所需要的例子： 1) 画一些东西 (从画布教程中取出)

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

// begin custom shape

context.beginPath();

...

您可以在鼠标位置创建画布 http://jsfiddle.net/v4nm487b/ document.οnmοusedοwn=mouseDown;

document.οnmοuseup=mouseUp;

var x1,y1;

function mouseDown(e){

x1=e.clientX;

y1=e.clientY;

}

function mouseUp(e){

var can = document.createElement("CANVAS");

c

...

我建议您查看WebSockets解决方案，将信息从服务器推送到客户端(JavaScript)。 收到更新后，您可以根据需要更新画布。 如果您首选的服务器技术是.NET，那么您应该看看的技术将是像我这样的Pusher服务，以及我们的.NET API ，它允许您通过我们的REST API将更新推送到客户端。 如果您希望托管自己的实时基础架构，那么您可以查看与IIS和XSocket集成的WebSync (实际上是Comet技术)。 本指南中还有许多实时技术可能会让您感兴趣。 如果您有任何其他问题，请告诉

...

问题在于，您正在尝试在呈现之前访问canvas 。 固定： Template.test.rendered = function(){

var canvas = $("#canvas1");

canvas.css('width', $(window).innerWidth());

canvas.css('height', $(window).innerHeight());

var context = canvas[0].getContext('2d');

//

...

jsFiddle： https ：//jsfiddle.net/jvLk0vhp/1/ javascript： var images = new Array();

var currentLocation = 0;

var totalImages = 7;

for (var i = 0; i < totalImages; i++) {

var img = new Image;

switch (i) {

case 0:

img.src = "h

...

您可以使用JavaScript将画布保存为特定的图像格式 var mycanvas = document.getElementById("whatever"); //get your canvas

var image = mycanvas.toDataURL("image/png"); //Convert the canvas to image, currently converting to .png

You can use JavaScript to save your canvas

...

分数条被绘制为700像素长，但是当分数条被清除时，clearRect使用20或30像素的长度来清除它。 这应该清除整个评分栏吗？ 此外，当为当前分数执行strokeText时，每次调用x / y值(500或650)时x / y值都不同。 我们没有设置(或更改)currentScorePositionX和Y变量的代码，因此也值得检查这些值 - 它们是否一致，是否设置正确等等 我不确定字体问题是怎么回事。 同样，我们没有所有的代码，所以我们必须做出一些假设。 我假设上下文存储在全局变量中。 stack

...

你可以在jsp中使用html5-canvas。 只要你在jsp中包含html5语法()和canvas的用法。 它会工作。 Canvas仅适用于这些浏览器版本。 http://caniuse.com/canvas对于不支持画布的浏览器，您可以使用pollyfill，否则功能将无法使用。 还有一点 - Spring MVC或任何其他后端技术无关紧要，只要您使用jsp或其他将html呈现给浏览器的视图。 谢谢 As clearly stated in an answer by BalusC to a d

...

我不知道如何避免刷新canva，因为它会违反刷新页面的基本思路，但您是否考虑过在区域设置或会话存储中缓存初始化数据？ 参看 https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage No way that I know of to avoid refreshing the canva as it would go against the basic idea of refreshing the page, but h

...