javascript - 舍入到 3 位数不起作用？

Question

我检查 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>

Answer 1

正如评论中指出的那样，问题的发生是因为 JavaScript 中的 Number 是标准的以 2 为底的浮点值，而精确的以 10 为底的分数几乎永远不能表示为精确的以 2 为底的分数(除了少数异常(exception)，例如0.5 或 0.25)。这意味着即使在四舍五入之后，您的值(value)也不是您想要的，也不是您想要的。一种解决方案是使用一些实现“十进制” float 或定点数的库。但出于您的目的，您可能可以使用 toPrecision返回

的方法

A string representing a Number object in fixed-point or exponential notation rounded to precision significant digits

更新的演示:

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>