绘制滚动图的最佳方法

Question

我想在canvas 上绘制一个scrollmap，它有一堆Y 坐标。

这样做最有效的是什么？我想带有一些平均点的渐变是最好的方法，但我不知道该怎么做。

我现在想做的是用red 填充画布，然后从顶部到每个Y 坐标绘制green 矩形。如果矩形具有一定程度的透明度，则应该会产生相当不错的滚动热图。

还有其他想法吗？或者如果有人知道如何实现渐变，那就太好了。

如果您不知道，滚动图应该如下所示：

Answer 1

根据来自 cmets 的其他信息，您可能希望使用分箱方法。如果我们将页面分割成 X 个高度区域（每个区域的高度为 1/X 倍 pageheight），那么我们可以简单地根据哪个“bin”执行计数用户的最终滚动高度落入。在 JSesque 伪代码中：

var X = 5, bins = [], idx;
userScrollHeights.forEach(function(Y) {
  idx = Math.floor(map(Y, 0, pageHeight, 0, X));
  bins[id] = bins[idx] ? bins[idx]++ : 1;
});

奇怪的是，标准 JS API 中缺少映射功能，但很容易实现为：

function map(value, istart, istop, ostart, ostop) {
  return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
}

bins 数组现在包含每个 bin 的“强度”。您选择的 bin 越多，您的滚动图就越准确。

当然，基本的滚动图不是彩色的，它只是强度，所以它更自然地是白到黑的叠加。如果您真的想要一张彩色地图，“最强烈”映射到红色，“最不强烈”映射到紫色，您可以使用具有 255 个 bin 的设置，并在找到最大值后简单地将每个强度级别映射到颜色值强度：

var bin_max = 0;
bins.forEach(function(value) {
  if(value > bin_max) bin_max= value;
});

随后是基于“彩虹”渐变中的五个切片的颜色映射：

function mapIntensityToColor(intensity, min, max) {
  var cint = map(intensity,min,max,0,255);
  var step = (max - min) / 5;
  if(cint > 204) 
    return [255, map(intensity, max-step,max, 255,0), 0];
  if(cint > 153) 
    return [map(intensity, max-2*step,max-step, 0,255), 255, 0];
  if(cint > 102) 
    return [0, 255, map(intensity, max-3*step,max-2*step, 255,0)];
  if(cint > 51)
    return [0, map(intensity, max-4*step,max-3*step, 0,255), 255];
  return [map(intensity, min,max-4*step, 255,0), 0, 255];
}

将您的画布（或 div）分割为 255 个步骤，并根据 mapIntensityToColor(bin[step_number], 0, bin_max) 为每个步骤着色，现在应该可以为您提供准确的滚动图。