Question

所以我一直在使用HTML canvas和Javascript来创建随机图像。大部分都运行得非常顺利，但最近我遇到了问题。

我正在尝试添加一个用户界面，用户可以在其中创建像素的红色，绿色和蓝色值的上限和下限，以及更改像素的大小。颜色给我带来了麻烦。

出于某种原因，以下功能：

function getRandomInt(min,max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

返回的值大于最大值。我还没弄清楚原因。

有关详情，@ max和@min来自<input type="number">代码，代码如下：

rmax = document.getElementById('rmax').value;

在另一个函数中。

然后，它们被存储在一个数组数组的数组中（我知道这是一个混乱的内存，但是数组大小永远不会非常大，因此目前这不是问题。）。

IE：

var height = canv.getAttribute("height");
var width = canv.getAttribute("width");
var tall = Math.floor(height/blockh)+1;
var wide = Math.floor(width/blockw)+1;
var mat = new Array(wide);
for(var i = 0; i<wide; i++){
    mat[i] = new Array(tall);
}
for(var i = 0; i<wide; i++){
    for(var j = 0; j<tall; j++){
        r = getRandomInt(rmin,rmax);
        g = getRandomInt(gmin,gmax);
        b = getRandomInt(bmin,bmax);
        mat[i][j] = new Array(4);
        mat[i][j][0] = r;
        mat[i][j][1] = g;
        mat[i][j][2] = b;
        mat[i][j][3] = false;
    }
}

最后，我运行mat并使用canvas绘制每个像素：

for(var i = 0; i<wide; i++){
    for(var j = 0; j<tall; j++){
        drawBlock(ctx,mat[i][j][0],mat[i][j][1],mat[i][j][2],(i*blockw),(j*blockh));
        mat[i][j][3] = true;
    }
}
//more code
function drawBlock(canv,r,g,b,x,y) {
  color = "rgba("+r+","+g+","+b+","+"1)";
  canv.beginPath();
  canv.fillStyle=color;
  canv.moveTo(x,y);
  canv.lineTo(x+blockw,y);
  canv.lineTo(x+blockw,y+blockh);
  canv.lineTo(x,y+blockh);
  canv.lineTo(x,y);
  canv.fill();
  canv.closePath();
}

根据<input>标签的性质，所有的分钟和最大值都被强制在0到256之间。

但是，当我运行代码时，它会获得正确的分钟和最大值，但它会计算远远超出最大值的颜色值。例如，rmin = 0;并且rmax = 256;我得到了大约8,000的r值。显然，这是一个问题，因为我只关注0到256之间的值。

注意：当我根据.js文件中的默认值进行绘制时，它可以正常工作。我只是在从<input>标签中检索值然后再次运行时才遇到问题。

我认为问题出在getRandomInt()函数中，但我可能会从<input>标记中检索值。我对此表示怀疑，因为我已经做了一些故障排除，并且它检索的值似乎是正确的。

有什么想法吗？

Answer 1

这是因为您将字符串作为参数传递。

getRandomInt('0', '256') // 1540

接下来会发生什么 - Math.floor(Math.random() * (max - min + 1))表达式返回的数字连接与min 字符串。

您必须使用parseInt(rmax, 10)

将其显式转换为整数

（Math.random（）* x）+ y返回大于x + y的数字

1 个答案: