时间戳

首页 > 解决方案 > MacOS chrome上的HTML5画布问题

javascript - MacOS chrome上的HTML5画布问题

问题描述

我正在尝试使用 HTML5 画布绘制散点图。我的散点图需要有很多点。当我尝试在画布上绘制大量点时，比如说 (7700000) 点，它适用于 Firefox 和 Safari。

非常多的点数（JS小提琴）

但由于某种原因，MacOS 上的 Google Chrome 上的画布是空白的。但是它适用于 Windows 和 Linux 的 Google Chrome。如果要绘制的点数较少，它可以在 MacOS 上工作，但当点数增加时就不行。我试图搜索相关问题，但找不到任何问题。我做错了什么还是谷歌 Chrome for MacOS 的问题？

点数少（JS Fiddle）

我正在使用以下函数在画布上绘图：

function drawPoint(scaleX, scaleY, point, k) {
    context.beginPath();
    context.fillStyle = pointColor;
    const px = scaleX(point[0]);
    const py = scaleY(point[1]);
    const arc_width = width/1000;
    const arc_height = height/1000;
    // context.arc(px, py, arc_width * k, 0, 2 * Math.PI, true);
    context.strokeRect(px, py, arc_width * k, arc_height * k)
    context.stroke();
}

标签： javascripthtmld3.jscanvashtml5-canvas

解决方案

你有一些用于 svg/canvas 的时髦 d3 动画（我不确定你为什么同时使用这两种动画）。这是一个影响性能的转换延迟。我可以在 Android 手机上加载小点，但是当我旋转或调整大小时，它会重新绘制它们，它们看起来完全不同。然后页面崩溃。

推荐阅读