javascript - HTML5 Canvas : Draw matrix with fixed first row and first column

Question

我在应用程序中使用 HTML5 Canvas 来渲染一个大矩阵 (1000*1000) 的单元格矩阵，这些单元格要么已填充，要么未填充。

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

/image/24kIV.png

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

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

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

Answer 1

您可以使用三个 div 进行布局，每个 div 包含一个 Canvas ，并在主元素滚动时滚动固定元素: http://jsfiddle.net/SjBE5/ .

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