绘制scrollmap的最佳方法

Question

我想在scrollmap上绘制一个canvas，其Y坐标为red。

这样做效率最高的是什么？我想一个具有一些平均点的梯度将是最好的方法，但我不知道该怎么做。

我现在要做的是用green填充画布，然后从Y坐标的顶部绘制{{1}}矩形。如果矩形具有一定程度的透明度，那么应该会产生相当漂亮的滚动热图。

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

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

Answer 1

根据评论中的其他信息，您可能希望使用分箱方法。如果我们将页面切割成 X 高度区域（每个区域的高度 1 / X 倍于页面高度），那么我们可以简单地根据哪个“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的“强度”。您选择的垃圾箱越多，您的滚动图就越准确。

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

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];
}

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