我正在制作一张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();
}