将#hex 转换为 0xFF-hex答案

【问题标题】：Convert #hex to 0xFF-hex将#hex 转换为 0xFF-hex
【发布时间】：2019-06-26 02:18:23
【问题描述】：

为什么 0xFF0000ff 是红色的，而#0000ff 是蓝色的？以及如何将#0000ff 转换为 0x，这样它才能正常工作？我试图在开始时添加 0xFF，但它会导致（我）意外的行为

我正在尝试实现这个算法http://jsfiddle.net/greggman/wpfd8he1/

function getPixel(pixelData, x, y) {
  if (x < 0 || y < 0 || x >= pixelData.width || y >= pixelData.height) {
    return -1;  // impossible color
  } else {
    return pixelData.data[y * pixelData.width + x];
  }
}

function floodFill(ctx, x, y, fillColor) {
  // read the pixels in the canvas
  const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

  // make a Uint32Array view on the pixels so we can manipulate pixels
  // one 32bit value at a time instead of as 4 bytes per pixel
  const pixelData = {
    width: imageData.width,
    height: imageData.height,
    data: new Uint32Array(imageData.data.buffer),
  };

  // get the color we're filling
  const targetColor = getPixel(pixelData, x, y);

  // check we are actually filling a different color
  if (targetColor !== fillColor) {

    const pixelsToCheck = [x, y];
    while (pixelsToCheck.length > 0) {
      const y = pixelsToCheck.pop();
      const x = pixelsToCheck.pop();

      const currentColor = getPixel(pixelData, x, y);
      if (currentColor === targetColor) {
        pixelData.data[y * pixelData.width + x] = fillColor;
        pixelsToCheck.push(x + 1, y);
        pixelsToCheck.push(x - 1, y);
        pixelsToCheck.push(x, y + 1);
        pixelsToCheck.push(x, y - 1);
      }
    }

    // put the data back
    ctx.putImageData(imageData, 0, 0);
  }
}

【问题讨论】：

标签： hex

【解决方案1】：

十六进制颜色遵循格式 [0x] [red] [green] [blue] [transparency]。
相反，十六进制“代码”遵循格式 [#] [red] [green] [blue]（没有列出透明度值）。

每种颜色在0 和F 之间分配2 个单位。单位是小写还是大写都没有关系。

0xFF0000ff 等同于十六进制代码#FF0000 和ff（实心）透明度。打破这个我们有[FF（红色）][00（绿色）][00（蓝色）]——纯红色。

为了将任何十六进制代码转换为十六进制符号，您只需添加 0x 和附加透明度值。假设您要转换的颜色是不透明的，您只需附加ff。

例如，要将#0000ff（蓝色）转换为十六进制，您需要在0x 前面加上ff，得到0x0000ffff。

【讨论】：

那么上面的算法不起作用:(我花了两个晚上试图实现这个洪水填充，但无济于事:(
0x0000ffff 不画蓝色（在算法中）

【解决方案2】：

0x 十六进制颜色与 Web 十六进制代码相反。十六进制代码的#RRGGBBAA 是0xAABBGGRR，其中AA 是alpha，BB 是蓝色，GG 是绿色，RR 是红色。

【讨论】：