HTML5 Canvas：绘制具有固定的第一行和第一列的矩阵

Question

我在我的应用程序中使用HTML5画布渲染一个大型矩阵（1000 * 1000）的单元格是否已填充。

但是我无法保持第一列和第一行固定，同时允许滚动矩阵的其余部分。这是我想要实现的目标：

http://i.stack.imgur.com/24kIV.png

滚动可以是CSS /浏览器滚动条或基于javascript的滚动。

有关如何保持第一行和列固定的任何提示？

更新 向左/向右滚动时，第一行也应滚动，上/下滚动和第一列相同。

Answer 1

您可以制作一个包含三个div的布局，每个布局包含一个画布，并在滚动主元素时滚动固定元素：http://jsfiddle.net/SjBE5/。

document.getElementById("maindiv").onscroll = ​​​​function() {
    document.getElementById("topdiv").scrollLeft = this.scrollLeft;
    document.getElementById("leftdiv").scrollTop = this.scrollTop;
};​