javascript事件太慢

Question

有什么方法可以改善以下html5示例，還是瀏覽器只是在減慢鼠標事件的處理速度？ 它是一個網格，在該點上，您將鼠標移動到一個紅色的矩形上。但是此矩形有點滯后於鼠標，因此移動到其位置較慢。 （如果鼠標快速移動）

這里的代碼：

<body>
    <canvas id="canvas" width="400" height="400">error or not supported.</canvas>
    <script>
        var lineSize = 10;
        var rasterSize = 5;
        var bx = 0;
        var by = 0;

        g2d = document.getElementById("canvas").getContext("2d");
        g2d.setFillColor("rgb(10, 10, 10)");
        g2d.fillRect(0, 0, g2d.canvas.width, g2d.canvas.height);
        g2d.setStrokeColor("rgb(0, 0, 255)");
        g2d.setLineWidth(lineSize);

        function repaint(){
            g2d.clearRect(0, 0, g2d.canvas.width, g2d.canvas.height);
            g2d.beginPath();
            for(i = 0; i < rasterSize + 1; i++){
                g2d.moveTo(0, (lineSize / 2) + i * (g2d.canvas.height - lineSize) / (rasterSize));
                g2d.lineTo(g2d.canvas.width, (lineSize / 2) + i * (g2d.canvas.height - lineSize) / (rasterSize)); 
                g2d.moveTo((lineSize / 2) + i * (g2d.canvas.width - lineSize) / (rasterSize), 0);
                g2d.lineTo((lineSize / 2) + i * (g2d.canvas.width - lineSize) / (rasterSize), g2d.canvas.height);
            }
            g2d.stroke();
            g2d.setFillColor("red");
            g2d.fillRect(bx - 5, by - 5, 11, 11);
        }
        repaint();

        g2d.canvas.addEventListener("mousemove", function(e){
            bx = e.offsetX;
            by = e.offsetY;
            repaint();
        });
    </script>
</body>

body {
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: black;
}
canvas {
    margin: auto;
    margin-top: 50px;
    display: block;
}

Answer 1

您可以將鼠標事件與工程圖分開，以提高性能。

創建一個數組來保存鼠標點
在mousemove中，將當前鼠標位置推入數組。
根據您的設計，您可能會使用Aboca限制點捕獲率的想法。
使用requestAnimationFrame創建一個循環。
在循環中，繪制自循環最后執行為1條路徑以來的所有點。

好處是：

requestAnimationFrame的繪制效率很高。
您正在通過一批點而不是一次繪制1點繪制多段線。
更改上下文狀態的代價有些昂貴，這使您只能更改一次狀態。

Answer 2

您可以像在這里一樣限制重新繪制的速率：

http://jsfiddle.net/sh6o91g4/1/

按您認為合適的方式進行調整，因為它可以提高性能，但同時也會降低渲染質量（跳過幀有其缺點）

            var now = new Date().getTime();
            if(now - time > 10){
                time = now;
                bx = e.offsetX;
                by = e.offsetY;
                repaint();
            }

javascript事件太慢

問題描述

2 個解決方案

解決方案1
0 2014-08-26 17:29:29

解決方案2
-1 2014-08-26 16:39:05

javascript事件太慢

問題描述

2 個解決方案

解決方案1 0 2014-08-26 17:29:29

解決方案2 -1 2014-08-26 16:39:05

解決方案1
0 2014-08-26 17:29:29

解決方案2
-1 2014-08-26 16:39:05