html 如何添加透明像素而不仅仅是白色像素？

kqlmhetl  于 2023-11-15  发布在  其他
关注(0)|答案(2)|浏览(174)

我刚刚做了一个小像素艺术应用程序，我遇到了一个问题，而我试图修复橡皮擦工具。当我试图用颜色'rgba擦除（0，0，0，0）'它什么也不做，所以我被迫用白色来解决。你们知道我可能做错了什么吗？（我也有另一个问题，所以我会问，当这一个回答）Here is the project下面是该项目的代码：

  1. var canvas = document.getElementById("canvas");
  2. var ctx = canvas.getContext("2d");
  3. var pixelSize = 10;
  4. var color = "#000000";
  5. var eraser = false;
  6. var fillStack = [];
  8. var fillButton = document.getElementById("fill");
  10. fillButton.addEventListener("click", function() {
  11.     processFillStack();
  12. });
  14. var downloadButton = document.getElementById("download");
  16. downloadButton.addEventListener("click", function() {
  17.     var dataURL = canvas.toDataURL("image/png");
  18.     var link = document.createElement("a");
  19.     link.setAttribute("href", dataURL);
  20.     link.setAttribute("download", "pixel-art.png");
  21.     link.click();
  22. });
  24. var widthInput = document.getElementById("width");
  25. var heightInput = document.getElementById("height");
  26. var resizeButton = document.getElementById("resize");
  28. resizeButton.addEventListener("click", function() {
  29.     canvas.width = widthInput.value;
  30.     canvas.height = heightInput.value;
  31.     var ctx = canvas.getContext("2d");
  32.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  33. });
  35. document.getElementById("eraser").addEventListener("change", function() {
  36.     eraser = this.checked;
  37. });
  39. canvas.addEventListener("mousedown", function(e) {
  40.     if (!fillButton.pressed) {
  41.         var x = Math.floor(e.offsetX / pixelSize);
  42.         var y = Math.floor(e.offsetY / pixelSize);
  43.         if (eraser) {
  44.             ctx.fillStyle = "rgba(255,255,255,.1)";
  45.         } else {
  46.             ctx.fillStyle = color;
  47.         }
  48.         ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  49.     }
  50. });
  52. canvas.addEventListener("mousemove", function(e) {
  53.     if (e.buttons == 1 && !fillButton.pressed) {
  54.         var x = Math.floor(e.offsetX / pixelSize);
  55.         var y = Math.floor(e.offsetY / pixelSize);
  56.         if (eraser) {
  57.             ctx.fillStyle = "rgba(255,255,255,.1)";
  58.         } else {
  59.             ctx.fillStyle = color;
  60.         }
  61.         ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  62.     }
  63. });
  65. var imageInput = document.getElementById("image-input");
  67. imageInput.addEventListener("change", function() {
  68.     var file = imageInput.files[0];
  69.     var reader = new FileReader();
  70.     reader.onload = function(e) {
  71.         var img = new Image();
  72.         img.onload = function() {
  73.             ctx.drawImage(img, 0, 0);
  74.         };
  75.         img.src = e.target.result;
  76.     };
  77.     reader.readAsDataURL(file);
  78. });
  81. function floodFill(x, y, fillColor) {
  82.     var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  83.     var pixelStack = [[x, y]];
  84.     var pixelPos, rowStart, rowEnd, up, down, i;
  85.     while (pixelStack.length) {
  86.         pixelPos = pixelStack.pop();
  87.         rowStart = pixelPos[1] * canvas.width * 4;
  88.         rowEnd = rowStart + canvas.width * 4;
  89.         up = false;
  90.         down = false;
  91.         for (i = rowStart; i < rowEnd; i += 4) {
  92.             if (matchColor(imageData.data, i, fillColor)) {
  93.                 continue;
  94.             }
  95.             if (matchColor(imageData.data, i, getPixelColor(pixelPos[0], pixelPos[1]))) {
  96.                 imageData.data[i] = fillColor[0];
  97.                 imageData.data[i + 1] = fillColor[1];
  98.                 imageData.data[i + 2] = fillColor[2];
  99.                 imageData.data[i + 3] = fillColor[3];
  100.                 if (pixelPos[1] > 0) {
  101.                     if (matchColor(imageData.data, i - canvas.width * 4, getPixelColor(pixelPos[0], pixelPos[1] - 1))) {
  102.                         if (!up) {
  103.                             pixelStack.push([pixelPos[0], pixelPos[1] - 1]);
  104.                             up = true;
  105.                         }
  106.                     } else if (up) {
  107.                         up = false;
  108.                     }
  109.                 }
  110.                 if (pixelPos[1] < canvas.height - 1) {
  111.                     if (matchColor(imageData.data, i + canvas.width * 4, getPixelColor(pixelPos[0], pixelPos[1] + 1))) {
  112.                         if (!down) {
  113.                             pixelStack.push([pixelPos[0], pixelPos[1] + 1]);
  114.                             down = true;
  115.                         }
  116.                     } else if (down) {
  117.                         down = false;
  118.                     }
  119.                 }
  120.                 if (pixelPos[0] > 0) {
  121.                     if (matchColor(imageData.data, i - 4, getPixelColor(pixelPos[0] - 1, pixelPos[1]))) {
  122.                         pixelStack.push([pixelPos[0] - 1, pixelPos[1]]);
  123.                     }
  124.                 }
  125.                 if (pixelPos[0] < canvas.width - 1) {
  126.                     if (matchColor(imageData.data, i + 4, getPixelColor(pixelPos[0] + 1, pixelPos[1]))) {
  127.                         pixelStack.push([pixelPos[0] + 1, pixelPos[1]]);
  128.                     }
  129.                 }
  130.             }
  131.         }
  132.     }
  133.     ctx.putImageData(imageData, 0, 0);
  134. }
  136. function matchColor(data, i, color) {
  137.     return data[i] == color[0] && data[i + 1] == color[1] && data[i + 2] == color[2] && data[i + 3] == color[3];
  138. }
  140. function getPixelColor(x, y) {
  141.     var imageData = ctx.getImageData(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  142.     var r = 0, g = 0, b = 0, a = 0;
  143.     for (var i = 0; i < imageData.data.length; i += 4) {
  144.         r += imageData.data[i];
  145.         g += imageData.data[i + 1];
  146.         b += imageData.data[i + 2];
  147.         a += imageData.data[i + 3];
  148.     }
  149.     var n = imageData.data.length / 4;
  150.     return [Math.round(r / n), Math.round(g / n), Math.round(b / n), Math.round(a / n)];
  151. }
  153. function processFillStack() {
  154.     var threads = 4; // number of threads to use
  155.     var stackSize = fillStack.length;
  156.     var chunkSize = Math.ceil(stackSize / threads);
  157.     var chunks = [];
  158.     for (var i = 0; i < threads; i++) {
  159.         chunks.push(fillStack.splice(0, chunkSize));
  160.     }
  161.     for (var i = 0; i < threads; i++) {
  162.         (function(chunk) {
  163.             setTimeout(function() {
  164.                 for (var j = 0; j < chunk.length; j++) {
  165.                     var x = chunk[j][0];
  166.                     var y = chunk[j][1];
  167.                     var color = chunk[j][2];
  168.                     floodFill(x, y, color);
  169.                 }
  170.             }, 0);
  171.         })(chunks[i]);
  172.     }
  173. }
  1. canvas {
  2.     background-color: white;
  3.     border: 1px solid black;
  4. }
  5. #color-picker {
  6.     width: 50px;
  7.     height: 50px;
  8. /*  position: absolute;
  9.     top: 10px;
  10.     left: 10px; */
  11. }
  12. #download {
  13.     display: block;
  14.     margin: 10px auto;
  15.     padding: 10px;
  16.     background-color: black;
  17.     color: white;
  18.     border: none;
  19.     border-radius: 5px;
  20.     cursor: pointer;
  21. }
  23. label, input, button {
  24.     display: block;
  25.     margin: 10px 0;
  26. }
  28. label {
  29.     font-weight: bold;
  30. }
  32. input[type="number"] {
  33.     width: 50px;
  34. }
  36. button {
  37.     padding: 10px;
  38.     background-color: black;
  39.     color: white;
  40.     border: none;
  41.     border-radius: 5px;
  42.     cursor: pointer;
  43. }
  45. #eraser {
  46.     display: none;
  47. }
  48. #eraser + label:before {
  49.     content: "";
  50.     display: inline-block;
  51.     width: 20px;
  52.     height: 20px;
  53.     background-color: white;
  54.     border: 1px solid black;
  55.     margin-right: 5px;
  56. }
  57. #eraser:checked + label:before {
  58.     background-color: black;
  59. }
  1. <canvas id="canvas"></canvas>
  3. <input type="color" id="color-picker">
  5. <input type="checkbox" id="eraser">
  6. <label for="eraser">Eraser</label>
  8. <button id="download">Download</button>
  10. <label for="width">Width:</label>
  11. <input type="number" id="width" value="20">
  12. <label for="height">Height:</label>
  13. <input type="number" id="height" value="20">
  14. <button id="resize">Resize</button>
  16. <button id="fill">Fill</button>
  18. Import Image:
  19. <input type="file" id="image-input">

我试图将彩色像素转换为完全透明的像素，但我最终得到的颜色是白色或什么都没有。

Html

2条答案

按热度按时间
cnwbcb6i

cnwbcb6i1#

就像其他人说的那样，fillRect会在已经存在的东西上作画，而不是替换。这让你可以像在真实的画布上一样混合透明的颜色。
您可以使用clearRect来删除。
将mousedown和mousemove中的事件侦听器更改为：

  1. if (eraser) {
  2.       ctx.clearRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  3.     } else {
  4.       ctx.fillStyle = color;
  5.       ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  6.     }

字符串
关于mozilla docs：
Canvas 2D API的CanvasRenderingContext2D.clearRect()方法通过将矩形区域中的像素设置为透明黑色来擦除这些像素。
演示：

  1. var canvas = document.getElementById('canvas');
  2. var ctx = canvas.getContext('2d');
  3. var pixelSize = 10;
  4. var color = '#000000';
  5. var eraser = false;
  6. var fillStack = [];
  8. var fillButton = document.getElementById('fill');
  10. fillButton.addEventListener('click', function () {
  11.   processFillStack();
  12. });
  14. var downloadButton = document.getElementById('download');
  16. downloadButton.addEventListener('click', function () {
  17.   var dataURL = canvas.toDataURL('image/png');
  18.   var link = document.createElement('a');
  19.   link.setAttribute('href', dataURL);
  20.   link.setAttribute('download', 'pixel-art.png');
  21.   link.click();
  22. });
  24. var widthInput = document.getElementById('width');
  25. var heightInput = document.getElementById('height');
  26. var resizeButton = document.getElementById('resize');
  28. resizeButton.addEventListener('click', function () {
  29.   canvas.width = widthInput.value;
  30.   canvas.height = heightInput.value;
  31.   var ctx = canvas.getContext('2d');
  32.   ctx.clearRect(0, 0, canvas.width, canvas.height);
  33. });
  35. document.getElementById('eraser').addEventListener('change', function () {
  36.   eraser = this.checked;
  37. });
  39. canvas.addEventListener('mousedown', function (e) {
  40.   if (!fillButton.pressed) {
  41.     var x = Math.floor(e.offsetX / pixelSize);
  42.     var y = Math.floor(e.offsetY / pixelSize);
  43.     if (eraser) {
  44.       ctx.clearRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  45.     } else {
  46.       ctx.fillStyle = color;
  47.       ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  48.     }
  49.   }
  50. });
  52. canvas.addEventListener('mousemove', function (e) {
  53.   if (e.buttons == 1 && !fillButton.pressed) {
  54.     var x = Math.floor(e.offsetX / pixelSize);
  55.     var y = Math.floor(e.offsetY / pixelSize);
  56.     if (eraser) {
  57.       ctx.clearRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  58.     } else {
  59.       ctx.fillStyle = color;
  60.       ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  61.     }
  62.   }
  63. });
  65. var imageInput = document.getElementById('image-input');
  67. imageInput.addEventListener('change', function () {
  68.   var file = imageInput.files[0];
  69.   var reader = new FileReader();
  70.   reader.onload = function (e) {
  71.     var img = new Image();
  72.     img.onload = function () {
  73.       ctx.drawImage(img, 0, 0);
  74.     };
  75.     img.src = e.target.result;
  76.   };
  77.   reader.readAsDataURL(file);
  78. });
  80. function floodFill(x, y, fillColor) {
  81.   var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  82.   var pixelStack = [[x, y]];
  83.   var pixelPos, rowStart, rowEnd, up, down, i;
  84.   while (pixelStack.length) {
  85.     pixelPos = pixelStack.pop();
  86.     rowStart = pixelPos[1] * canvas.width * 4;
  87.     rowEnd = rowStart + canvas.width * 4;
  88.     up = false;
  89.     down = false;
  90.     for (i = rowStart; i < rowEnd; i += 4) {
  91.       if (matchColor(imageData.data, i, fillColor)) {
  92.         continue;
  93.       }
  94.       if (
  95.         matchColor(imageData.data, i, getPixelColor(pixelPos[0], pixelPos[1]))
  96.       ) {
  97.         imageData.data[i] = fillColor[0];
  98.         imageData.data[i + 1] = fillColor[1];
  99.         imageData.data[i + 2] = fillColor[2];
  100.         imageData.data[i + 3] = fillColor[3];
  101.         if (pixelPos[1] > 0) {
  102.           if (
  103.             matchColor(
  104.               imageData.data,
  105.               i - canvas.width * 4,
  106.               getPixelColor(pixelPos[0], pixelPos[1] - 1)
  107.             )
  108.           ) {
  109.             if (!up) {
  110.               pixelStack.push([pixelPos[0], pixelPos[1] - 1]);
  111.               up = true;
  112.             }
  113.           } else if (up) {
  114.             up = false;
  115.           }
  116.         }
  117.         if (pixelPos[1] < canvas.height - 1) {
  118.           if (
  119.             matchColor(
  120.               imageData.data,
  121.               i + canvas.width * 4,
  122.               getPixelColor(pixelPos[0], pixelPos[1] + 1)
  123.             )
  124.           ) {
  125.             if (!down) {
  126.               pixelStack.push([pixelPos[0], pixelPos[1] + 1]);
  127.               down = true;
  128.             }
  129.           } else if (down) {
  130.             down = false;
  131.           }
  132.         }
  133.         if (pixelPos[0] > 0) {
  134.           if (
  135.             matchColor(
  136.               imageData.data,
  137.               i - 4,
  138.               getPixelColor(pixelPos[0] - 1, pixelPos[1])
  139.             )
  140.           ) {
  141.             pixelStack.push([pixelPos[0] - 1, pixelPos[1]]);
  142.           }
  143.         }
  144.         if (pixelPos[0] < canvas.width - 1) {
  145.           if (
  146.             matchColor(
  147.               imageData.data,
  148.               i + 4,
  149.               getPixelColor(pixelPos[0] + 1, pixelPos[1])
  150.             )
  151.           ) {
  152.             pixelStack.push([pixelPos[0] + 1, pixelPos[1]]);
  153.           }
  154.         }
  155.       }
  156.     }
  157.   }
  158.   ctx.putImageData(imageData, 0, 0);
  159. }
  161. function matchColor(data, i, color) {
  162.   return (
  163.     data[i] == color[0] &&
  164.     data[i + 1] == color[1] &&
  165.     data[i + 2] == color[2] &&
  166.     data[i + 3] == color[3]
  167.   );
  168. }
  170. function getPixelColor(x, y) {
  171.   var imageData = ctx.getImageData(
  172.     x * pixelSize,
  173.     y * pixelSize,
  174.     pixelSize,
  175.     pixelSize
  176.   );
  177.   var r = 0,
  178.     g = 0,
  179.     b = 0,
  180.     a = 0;
  181.   for (var i = 0; i < imageData.data.length; i += 4) {
  182.     r += imageData.data[i];
  183.     g += imageData.data[i + 1];
  184.     b += imageData.data[i + 2];
  185.     a += imageData.data[i + 3];
  186.   }
  187.   var n = imageData.data.length / 4;
  188.   return [
  189.     Math.round(r / n),
  190.     Math.round(g / n),
  191.     Math.round(b / n),
  192.     Math.round(a / n),
  193.   ];
  194. }
  196. function processFillStack() {
  197.   var threads = 4; // number of threads to use
  198.   var stackSize = fillStack.length;
  199.   var chunkSize = Math.ceil(stackSize / threads);
  200.   var chunks = [];
  201.   for (var i = 0; i < threads; i++) {
  202.     chunks.push(fillStack.splice(0, chunkSize));
  203.   }
  204.   for (var i = 0; i < threads; i++) {
  205.     (function (chunk) {
  206.       setTimeout(function () {
  207.         for (var j = 0; j < chunk.length; j++) {
  208.           var x = chunk[j][0];
  209.           var y = chunk[j][1];
  210.           var color = chunk[j][2];
  211.           floodFill(x, y, color);
  212.         }
  213.       }, 0);
  214.     })(chunks[i]);
  215.   }
  216. }
  1. canvas {
  2.   background-color: white;
  3.   border: 1px solid black;
  4. }
  5. #color-picker {
  6.   width: 50px;
  7.   height: 50px;
  8. /*  position: absolute;
  9.   top: 10px;
  10.   left: 10px; */
  11. }
  12. #download {
  13.   display: block;
  14.   margin: 10px auto;
  15.   padding: 10px;
  16.   background-color: black;
  17.   color: white;
  18.   border: none;
  19.   border-radius: 5px;
  20.   cursor: pointer;
  21. }
  23. label, input, button {
  24.   display: block;
  25.   margin: 10px 0;
  26. }
  28. label {
  29.   font-weight: bold;
  30. }
  32. input[type="number"] {
  33.   width: 50px;
  34. }
  36. button {
  37.   padding: 10px;
  38.   background-color: black;
  39.   color: white;
  40.   border: none;
  41.   border-radius: 5px;
  42.   cursor: pointer;
  43. }
  45. #eraser {
  46.   display: none;
  47. }
  48. #eraser + label:before {
  49.   content: "";
  50.   display: inline-block;
  51.   width: 20px;
  52.   height: 20px;
  53.   background-color: white;
  54.   border: 1px solid black;
  55.   margin-right: 5px;
  56. }
  57. #eraser:checked + label:before {
  58.   background-color: black;
  59. }
  1. <canvas id="canvas"></canvas>
  3. <input type="color" id="color-picker">
  5. <input type="checkbox" id="eraser">
  6. <label for="eraser">Eraser</label>
  8. <button id="download">Download</button>
  10. <label for="width">Width:</label>
  11. <input type="number" id="width" value="20">
  12. <label for="height">Height:</label>
  13. <input type="number" id="height" value="20">
  14. <button id="resize">Resize</button>
  16. <button id="fill">Fill</button>
  18. Import Image:
  19. <input type="file" id="image-input">
展开查看全部
赞(0）分享  回复(0）举报  2023-11-15
yrdbyhpb

yrdbyhpb2#

正如我在这里看到的，当你模拟橡皮擦效果时，你使用了一种半透明的颜色rgba(255,255,255,.1)。我认为这种半透明的颜色与画布的白色背景混合在一起，所以它会给你一个白色区域。
更好的方法是，在这里使用globalCompositeOperation，值为destination-out，这样新的绘图只会在现有绘图透明的区域中绘制。
在mousedown和mousemove中，当橡皮擦工具处于活动状态时，将globalCompositeOperation属性设置为destination-out。
在下面的代码中，globalCompositeOperation在每次绘制操作后设置为source-over，以便正常绘制后续图形;

  1. canvas.addEventListener("mousedown", function(e) {
  2.   if (!fillButton.pressed) {
  3.       var x = Math.floor(e.offsetX / pixelSize);
  4.       var y = Math.floor(e.offsetY / pixelSize);
  5.       if (eraser) {
  6.           ctx.globalCompositeOperation = "destination-out";
  7.           ctx.fillStyle = "rgba(0,0,0,1)";
  8.           ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  9.       } else {
  10.           ctx.fillStyle = color;
  11.           ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  12.       }
  13.       ctx.globalCompositeOperation = "source-over";
  14.   }
  15. });
  17. canvas.addEventListener("mousemove", function(e) {
  18.   if (e.buttons == 1 && !fillButton.pressed) {
  19.       var x = Math.floor(e.offsetX / pixelSize);
  20.       var y = Math.floor(e.offsetY / pixelSize);
  21.       if (eraser) {
  22.           ctx.globalCompositeOperation = "destination-out";
  23.           ctx.fillStyle = "rgba(0,0,0,1)";
  24.           ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  25.       } else {
  26.           ctx.fillStyle = color;
  27.           ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
  28.       }
  29.       ctx.globalCompositeOperation = "source-over";
  30.   }
  31. });

字符串
然后，在显示最终图像时，您需要使用globalCompositeOperation属性将原始画布绘制到其自身上，并设置为destination-out。这将从原始绘图中删除删除的区域;

  1. function displayFinalImage() {
  2.   ctx.globalCompositeOperation = "destination-out";
  3.   ctx.drawImage(canvas, 0, 0);
  4.   ctx.globalCompositeOperation = "source-over";
  5. }

型
这应该允许您使用任何颜色擦除，包括rgba(0, 0, 0, 0)，并且仍然可以看到擦除的区域是透明的。

展开查看全部
赞(0）分享  回复(0）举报  2023-11-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com