javascript - 四舍五入到三位数不起作用？

我检查imageData中的一定数量的随机像素以获取黑白比率。当我使用

Math.round(num * Math.pow(10, decimalPlace)) / Math.pow(10, decimalPlace);

公式使数字变为3个数字，有时输出看起来像这样，“ 7.500000003％”。谁能解释一下？顺便说一句，num.toFixed（decimalPlaces）不是我想要的，因为有时我会得到类似“ 77.5123123”的输出，而该函数将变成“ 77.512”。我想要3个有效数字。

该选项卡中的片段有点奇怪，不知道为什么。程式码片段：

var can, ctx, w, h, boxes = []
;
window.onload = function() {
  can = document.getElementById("can"); ctx = can.getContext("2d");
	can.width = w = window.innerWidth; can.height = h =     window.innerHeight;
  var amount = 3;

  for(var i = 1; i < amount+1; i++) {
		var x = w/(amount+1)*i, y = h/5, width = height = Math.round(Math.random()*w/Math.pow(amount, 2)+25);

		boxes.push(new Box(x, y, width, height));
  }

  console.log("White : Black : Anomaly");
	console.log(" ");
	console.log("-------Circles-------");
	console.log(" ");

	var dec = Math.pow(10, 3);

	boxes.forEach(function(ob) {
		ob.draw();
		var result = getRatios(getPixels(ob));
		console.log(Math.round(result[0]*dec)/dec*100+"% : "+Math.round(result[1]*dec)/dec*100+"% : "+Math.round(result[2]*dec)/dec*100+"%");
	});
}

function getPixels(ob) {
	var imageData = ctx.getImageData(ob.x, ob.y, ob.width, ob.height)
	return imageData.data;
}

function getRatios(data) {
	var hitWhite = 0, hitBlack = 0, hitAnomaly = 0;
	var reps = Math.round(data.length/4/10);

	for(var i = 0; i < reps; i++) {
		var pixel = Math.round(Math.random()*data.length/4);
		var r = data[pixel*4], g = data[pixel*4+1], b = data[pixel*4+2];

		if(r == 255 & g == 255 & b == 255) { hitWhite++; }
		else if(r == 0 & g == 0 & b == 0) { hitBlack++; }
		else { hitAnomaly++; }
	}

	return [hitWhite/reps, hitBlack/reps, hitAnomaly/reps];
}

class Box {
	constructor(x, y, width, height) {
		this.x = x; this.y = y; this.width = width; this.height = height;
		this.cx = this.x+this.width/2; this.cy = this.y+this.height/2; this.r = this.width/2; this.angle = Math.PI*2;
	}

	draw() {
		ctx.fillStyle = "white";
		ctx.fillRect(this.x, this.y, this.width, this.height)

		ctx.fillStyle = "black";
		ctx.beginPath()
			ctx.arc(this.cx, this.cy, this.r, 0, this.angle, true)
			ctx.fill();
		ctx.closePath()
	}
}

canvas { background: rgb(50, 50, 50); }

<canvas id="can"></canvas>

最佳答案

正如注释中指出的那样，之所以会出现此问题，是因为JavaScript中的Number是标准的浮点基数2值，而精确的基数10分数几乎永远无法表示为精确的基数2分数（有一些例外，例如0.5或0.25） 。这意味着即使四舍五入，您的价值也不是您想要的，也不能成为它。一种解决方案是使用一些实现“十进制”浮点数或定点数的库。但是出于您的目的，您可能可以使用toPrecision方法，该方法返回


  以定点或指数符号表示Number对象的字符串，四舍五入为precision有效数字


更新的演示：

var can, ctx, w, h, boxes = []
;
window.onload = function() {
  can = document.getElementById("can"); ctx = can.getContext("2d");
	can.width = w = window.innerWidth; can.height = h =     window.innerHeight;
  var amount = 3;

  for(var i = 1; i < amount+1; i++) {
		var x = w/(amount+1)*i, y = h/5, width = height = Math.round(Math.random()*w/Math.pow(amount, 2)+25);

		boxes.push(new Box(x, y, width, height));
  }

  console.log("White : Black : Anomaly");
	console.log(" ");
	console.log("-------Circles-------");
	console.log(" ");



	var formatPercent = function(x) {
		var precision = 3;
		var dec = Math.pow(10, precision);
		var r = Math.round(x*dec)/dec * 100;
		var s = r.toPrecision(precision)+"%";
		return s;
	};


	boxes.forEach(function(ob) {
		ob.draw();
		var result = getRatios(getPixels(ob));
		console.log(formatPercent(result[0]) + " : " + formatPercent(result[1]) + " : " + formatPercent(result[2]));
	});
}

function getPixels(ob) {
	var imageData = ctx.getImageData(ob.x, ob.y, ob.width, ob.height)
	return imageData.data;
}

function getRatios(data) {
	var hitWhite = 0, hitBlack = 0, hitAnomaly = 0;
	var reps = Math.round(data.length/4/10);

	for(var i = 0; i < reps; i++) {
		var pixel = Math.round(Math.random()*data.length/4);
		var r = data[pixel*4], g = data[pixel*4+1], b = data[pixel*4+2];

		if(r == 255 & g == 255 & b == 255) { hitWhite++; }
		else if(r == 0 & g == 0 & b == 0) { hitBlack++; }
		else { hitAnomaly++; }
	}

	return [hitWhite/reps, hitBlack/reps, hitAnomaly/reps];
}

class Box {
	constructor(x, y, width, height) {
		this.x = x; this.y = y; this.width = width; this.height = height;
		this.cx = this.x+this.width/2; this.cy = this.y+this.height/2; this.r = this.width/2; this.angle = Math.PI*2;
	}

	draw() {
		ctx.fillStyle = "white";
		ctx.fillRect(this.x, this.y, this.width, this.height)

		ctx.fillStyle = "black";
		ctx.beginPath()
			ctx.arc(this.cx, this.cy, this.r, 0, this.angle, true)
			ctx.fill();
		ctx.closePath()
	}
}

canvas { background: rgb(50, 50, 50); }

<canvas id="can"></canvas>

关于javascript - 四舍五入到三位数不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50748952/