Question

我是HTML5和JavaScript的新手，遵循一些教程，
我想出了类似的东西：

<html>
<head>
<title> Track Mouse </title>
<canvas id="myCanvas" width="400" height="200"
style="border:1px solid #000000;">
</canvas>
<script type="text/javascript">
function main()
{
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    window.onmousemove = handleMouseMove;
    function handleMouseMove(event) {

        event = event || window.event; // IE-ism
        // event.clientX and event.clientY contain the mouse position
        xPos = event.clientX;
        yPos = event.clientY;

        // Within entire canvas
        if (xPos >= 0 && xPos <= myCanvas.width &&
            yPos >= 0 && yPos <= myCanvas.height) {

            document.Form1.posx.value = xPos;
            document.Form1.posy.value = yPos;
            // Top-left
            if (xPos <= myCanvas.width / 2 && xPos >= 0 &&
                yPos <= myCanvas.height / 2 && yPos >= 0) {
                ctx.beginPath();
                ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
                ctx.moveTo(0, 0);
                ctx.lineTo(xPos, yPos);
                ctx.stroke();
            }
            // Top-right
            if (xPos <= myCanvas.width && xPos >= myCanvas.width / 2 &&
                yPos <= myCanvas.height / 2 && yPos >= 0) {
                ctx.beginPath();
                ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
                ctx.moveTo(myCanvas.width, 0);
                ctx.lineTo(xPos, yPos);
                ctx.stroke();
            }
            // Bottom-left
            if (xPos <= myCanvas.width && xPos >= 0 &&
                yPos <= myCanvas.height && yPos >= myCanvas.height / 2) {
                ctx.beginPath();
                ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
                ctx.moveTo(0, myCanvas.height);
                ctx.lineTo(xPos, yPos);
                ctx.stroke();
            }
            // Bottom-right
            if (xPos <= myCanvas.width && xPos >= myCanvas.width / 2 &&
                yPos <= myCanvas.height && yPos >= myCanvas.height / 2) {
                ctx.beginPath();
                ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
                ctx.moveTo(myCanvas.width, myCanvas.height);
                ctx.lineTo(xPos, yPos);
                ctx.stroke();
            }
        }
    }
}
</script>

</head>

<body onload="main()">
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
</body>
</html>

以下是上述代码的演示测试：http://jsfiddle.net/9YXBD/

我想更进一步，我希望它能同时展示别人的动作。因此，例如，如果我有两个Chrome窗口打开，并排并在右侧窗口的画布中进行移动，我的动作也将显示在左侧窗口的画布中。我查看了server-side events的HTML5，但我不知道从哪里开始。

Answer 1

如果没有要连接的服务器，您将无法执行此操作，这将运行提供某种连接集线器的服务器端应用程序或服务，所有客户端都连接到该服务器。这需要一些服务器端编程。没有外界的帮助，浏览器无法连接到其他浏览器。

您可以让服务器接受来自客户端的输入，然后将更新发送给所有其他连接的客户端，了解发生的情况。根据您使用的服务器端技术，具体如何使其变得非常不同。

您应该使用哪种服务器端技术？这里有几乎无限的选择，我不可能在这里推荐任何权威。选择一种你喜欢的语言，很有可能用它来编写服务器端代码。

在客户端，您可以使用服务器端事件来侦听来自服务器的更新。但是，您的服务器必须再次实施以支持该协议。

但我不知道从哪里开始。

您从服务器开始
在该服务器上公开一些API，以便从客户端发送和接收信息。
从客户端（客户端JavaScript）

Answer 2

我会研究一下像signalR这样的技术并生成一个Web服务器应用程序。有一个很好的演示与你在这里做的http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-high-frequency-realtime-with-signalr-20

有太大的不同

查看别人的行为

2 个答案: