Question

以下是演示我的意思的演示：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Canvas Test</title>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <canvas id="canvas2" width="800" height="600"></canvas>
    <script>
        function randomInteger(min, max) {
            return Math.floor(Math.random() * ((max + 1) - min) + min);
        }
        var start = performance.now();
        var canvas = document.getElementById("canvas");
        var canvas2 = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var ctx2 = canvas2.getContext("2d");
        var points = 1000000; // Changing this changes the performance of drawImage
        for (var i = 0; i < points; i++) {
            ctx.lineTo(randomInteger(0, 800), randomInteger(0, 600));
        }
        ctx.stroke();

        var t0 = performance.now();
        ctx2.drawImage(canvas, 0, 0, 800, 600, 0, 0, 800, 600);
        console.log("Copy time 1: " + (performance.now() - t0) + " ms");

        ctx.lineTo(0, 0);
        ctx.stroke();

        var t1 = performance.now();
        ctx2.drawImage(canvas, 0, 0, 800, 600, 0, 0, 800, 600);
        var end = performance.now();
        console.log("Copy time 2: " + (end - t1) + " ms");
        console.log("Total time: " + (end - start) + " ms");
    </script>
</body>
</html>

在Ubuntu上，在Chrome 59中，drawImages分别需要13分钟和12分钟的100,000分，但对于1,000,000分，drawImage分别需要129分和706分。奇怪的是，在Firefox 55中，drawImage发生在2毫秒之内，但总时间与Chrome相当。我认为这只是浏览器实现的差异。

我认为将像素数据从一个画布复制到另一个画布将是一个恒定时间操作（无论在源画布上绘制什么）。我认为由于点的数量，这种差异与GPU或内存抖动有关。是否有任何关于这种差异的实际来源的见解，更好的是有没有办法在这种情况下提高drawImage的性能？

HTML Canvas`drawIImage`具有很多功能，性能不佳

0 个答案: