Javascript 如何将html表格与自定义画布图形对齐

我需要构建一个包含两个主要组件的UI（HTML5）：在HTML5画布中绘制的自定义图表；一张桌子

问题是图表必须与表格对齐。如果水平滚动表格，图表内容也会滚动

一个重要的限制是图表是非常定制的。我将无法使用任何现有的图表组件。我必须自己编写代码，在画布上绘制

我正在努力想办法做这件事。如何在滚动期间在画布上触发重新绘制？如何知道每个表格单元格开头画布上的对应坐标？如何编写这两个组件的HTML/CSS以确保布局不会在不同的屏幕大小上中断

我仍然在计划这个项目，我非常愿意使用任何框架/语言

我需要一些光线

你能帮忙吗

---

谢谢

您可以使用jQuery scrollLeft（）获取滚动位置，并将画布重绘函数设置为jQuery scroll（），以便在滚动位置更改时更新

table = $('#container')

updatePosition = () => {
  // Synchronize canvas here:
  repaintCanvas(table.scrollLeft());
}

table.scroll(updatePosition);

---

下面是一个演示JSFIDLE:

如果您使用jquery，那么在滚动部分试试这个，在画布容器中使用

overflow-x:scroll

就很容易了。谢谢您的评论，但你们没有抓住要点。这样做的目的不是滚动画布。问题是如何绘制与滚动html表同步的画布。用户将滚动下表，画布必须相应地重新绘制。检查我链接到的Q/A，其中一种方法是将画布重新绘制为滚动，即使没有。看起来不错！非常感谢你！我们会让您知道它是否在完整的应用程序中工作。Tks！