Javascript 使用后不绘制画布

我有一个函数，当被调用时，它会清除画布

function ClearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

我遇到的问题是，当我再次尝试使用

fillRect（）

在画布上绘制某些内容时，我要绘制的项目会显示在画布的底部，只有少数项目会显示出来。我第二次尝试时，什么也没出现

要查看我的完整代码和测试运行，请转到

var宽度=50；
var高度=50；
var interpolate=d3。interpolate（‘白色’、‘黑色’）；
var高程=[]；
var colormap=[]；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.canvas.width=window.innerWidth；
ctx.canvas.height=window.innerHeight；
var-rectY=0；
生成Darray（标高、0、宽度、高度）；
生成Darray（彩色贴图，0，宽度，高度）；
var gen=新的SimplexNoise（）；
函数Generate2DArray（空数组、填充、宽度、高度）{
对于（变量i=0；i

您的

rectY

将在全局级别的代码顶部声明：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;

var rectY = 0;

因此，每次运行

GenTerrain

时，它都会引用该变量并将其添加到：

rectY += 9

通过将

rectY

封装在

GenTerrain

内部来修复它，这样每次调用函数时它都从0开始

function GenTerrain() {
  var rectY = 0;
  for(var y = 0; y < height; y++) {
    for(var x = 0; x < width; x++) {      
      var nx = x/width - 0.5, ny = y/height - 0.5;
      elevation[y][x] = noise(nx * 2.57, ny * 2.57);
      colormap[y][x] = interpolate(elevation[y][x]);

      ctx.fillStyle = colormap[y][x];
      ctx.fillRect(x*10, y+rectY, 10, 10);
    }
  rectY += 9
  }
}

函数GenTerrain（）{
var-rectY=0；
对于（变量y=0；y

当我这样做并单击“重置”和“生成地形”时，它会绘制与第一次单击“生成地形”相同的矩形。这与您原来的问题完全不同。如果希望地形不同，则必须找出如何随机化

噪波

。一种方法是每次调用

GenTerrain

时实例化一个新的

gen

。

function GenTerrain() {
  var rectY = 0;
  for(var y = 0; y < height; y++) {
    for(var x = 0; x < width; x++) {      
      var nx = x/width - 0.5, ny = y/height - 0.5;
      elevation[y][x] = noise(nx * 2.57, ny * 2.57);
      colormap[y][x] = interpolate(elevation[y][x]);

      ctx.fillStyle = colormap[y][x];
      ctx.fillRect(x*10, y+rectY, 10, 10);
    }
  rectY += 9
  }
}