HTML5 Canvas在谷歌铬和铬方面非常慢,但其他人很快

时间:2016-11-23 10:13:00

标签: javascript html5 canvas

我正在制作一张15,000分的画布散点图。每个点包含2个圆圈。它在Firefox和Safari中完美运行(需要200ms),但在Chrome中需要(1500ms)。这是我试过的代码。

// dataUpdate has 15000 points
dataUpdate.forEach(function(d, i) {

    var x = getXYvalue(d, "x"),
        y = getXYvalue(d, "y"),
        size = getSymbolSize(d);

    context.save();
    context.translate(x, y);

    if (outerFillColor || outerStrokeColor) {

        context.beginPath();
        context.fillStyle = fillColor;
        context.strokeStyle = strokeColor;
        context.lineWidth = outerStrokeWidth;

        context.arc(0, 0, size, 0, Math.PI * 2);

        if (outerFillColor) {
            context.fill();
        }
        if (outerStrokeColor && outerStrokeWidth) {
            context.stroke();
        }
        context.closePath();
    }

    if (innerFillColor || innerStrokeColor) {

        context.beginPath();
        context.fillStyle = fillColor;
        context.strokeStyle = strokeColor;
        context.lineWidth = innerStrokeWidth;
        context.arc(0, 0, size / 2, 0, Math.PI * 2);

        if (innerFillColor) {
            context.fill();
        }
        if (innerStrokeColor && innerStrokeWidth) {
            context.stroke();
        }
        context.closePath();
    }
    context.restore();
}

0 个答案:

没有答案