Healthbar Colorcalculation

Question

我找到了一个非常漂亮的HealthBar代码。

，但我不太了解颜色计算的工作原理。

如果你们中有人可以向我解释计算，我会很高兴。

var display = document.getElementById('display').getContext('2d');
drawHealthbar(display, 10, 10, 500, 50, 5, 5);
function drawHealthbar(canvas, x, y, width, height, health, max_health) {
  if (health >= max_health) {
    health = max_health;
  }
  if (health <= 0) {
    health = 0;
  }
  canvas.fillStyle = '#000000';
  canvas.fillRect(x, y, width, height);
  var colorNumber = Math.round((1 - (health / max_health)) * 0xff) * 0x10000 + Math.round((health / max_health) * 0xff) * 0x100;
  var colorString = colorNumber.toString(16);
  if (colorNumber >= 0x100000) {
    canvas.fillStyle = '#' + colorString;
  } else if (colorNumber << 0x100000 && colorNumber >= 0x10000) {
    canvas.fillStyle = '#0' + colorString;
  } else if (colorNumber << 0x10000) {
    canvas.fillStyle = '#00' + colorString;
  }
  canvas.fillRect(x + 1, y + 1, (health / max_health) * (width - 2), height - 2);
}

Answer 1

背景

颜色通常显示为六边性RGB值。这意味着，当您看到描述为#456BC9的颜色时，这意味着红色值为45，绿色值为6B，蓝色值为C9。

六边形是指hexidecimal而不是数字进行0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11...，而是去0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D E, F, 10, 11...(即有16个"数字"，而不是10(。否则，这被称为" base-16"(与Base-10的十进制系统相反(。

---

代码说明

var colorNumber = Math.round((1 - (health / max_health)) * 0xff) * 0x10000 + Math.round((health / max_health) * 0xff) * 0x100;

这一点代码正在基于用户的健康生成六边性数字。在许多编程语言中，您可以通过将数字与0x进行前缀。

。

---

var colorString = colorNumber.toString(16);

这一点代码将该数字变成一个字符串，但是保持六边形(基本16(格式。

---

if (colorNumber >= 0x100000) {
    canvas.fillStyle = '#' + colorString;
  } else if (colorNumber << 0x100000 && colorNumber >= 0x10000) {
    canvas.fillStyle = '#0' + colorString;
  } else if (colorNumber << 0x10000) {
    canvas.fillStyle = '#00' + colorString;
  }

此部分在正确的位置添加#符号，因此最终字符串是#，然后是6个数字/字母。

---

代码的其余部分正在计算健康或根据刚刚定义的填充物填充矩形。