如何在JavaScript中将下载的画布图像的背景颜色设为白色？

Question

我想做什么

我想知道如何将背景颜色设置为白色。

我用画布构建了一个绘图应用程序。您可以通过在按住鼠标左键的同时移动鼠标来在画布上进行绘制。

您还可以通过单击“下载”按钮下载绘制的画布图像。但是它的背景色是黑色的（技术上是透明的）。

如何将其更改为白色？

在此之前，我发布了相同的问题。有人建议我打开另一个问题，因为上一个问题中缺少大多数代码。这个问题有更多详细信息。

---

我尝试过的

我在代码中添加了以下代码，但是效果不佳。我什么都画不出来。

ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

---

这是我的代码

HTML

<button class="btn--download">Download</button>
<canvas id="draw" width="640" height="640"></canvas>
<a id="download_link"></a>

CSS

#draw {
  display: block;
  margin: 0 auto;
  background: #fff;
  border-radius: 0.3em;
  box-shadow: 0 0.1rem 0.5rem 0.1rem rgba(43, 12, 1, 0.1);
}

JavaScript

// Canvas
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.globalCompositeOperation = 'hue';
// ctx.fillStyle = "#fff";
// ctx.fillRect(0, 0, canvas.width, canvas.height);
// I removed fillStyle & fillRect because I couldn't draw anything due to them.

let isDrawing = false;
let lastX = 0;
let lastY = 0;

function draw(e) {
  if (!isDrawing) return; // Stop the fn from running when they are not moused down.
  console.log(e);
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

// Save as Image
const downloadBtn = document.querySelector('.btn--download');
const downloadLink = document.querySelector('#download_link');
const locale = new Date().toLocaleString();
const filename = `doodle${locale}.png`;
downloadBtn.addEventListener('click', downloadImage);
function downloadImage() {
  if (canvas.msToBlob) {
    const blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob, filename);
  } else {
      downloadLink.href = canvas.toDataURL('image/png');
      downloadLink.download = filename;
      downloadLink.click();
  }
}

我想将下载图像的背景颜色设为白色。

---

k3llydev

Answer 1

删除此行

ctx.globalCompositeOperation = 'hue';

这就是使笔触在白色背景上变白的原因。

Answer 2

就像我在之前的回答中提到的那样，我发现是导致您的代码出现此问题的原因。

添加后：

ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

与您的代码冲突的是这一行：

ctx.globalCompositeOperation = 'hue';

这是在保留顶层色调的同时保留了底层的亮度和色度。

  

正如我看到的代码所示，问题是您实际上不需要使用这种分层，因为您只会绘制线条。因此，尝试删除它或将其替换为here的另一种分层类型。

在这里看到它的工作

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

let isDrawing = false;
let lastX = 0;
let lastY = 0;

function draw(e) {
  if (!isDrawing) return; // Stop the fn from running when they are not moused down.
  console.log(e);
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

// Save as Image
const downloadBtn = document.querySelector('.btn--download');
const downloadLink = document.querySelector('#download_link');
const locale = new Date().toLocaleString();
const filename = `doodle${locale}.png`;
downloadBtn.addEventListener('click', downloadImage);
function downloadImage() {
  if (canvas.msToBlob) {
    const blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob, filename);
  } else {
      downloadLink.href = canvas.toDataURL('image/png');
      downloadLink.download = filename;
      downloadLink.click();
  }
}

#draw {
  display: block;
  margin: 0 auto;
  background: #fff;
  border-radius: 0.3em;
  box-shadow: 0 0.1rem 0.5rem 0.1rem rgba(43, 12, 1, 0.1);
}

<button class="btn--download">Download</button>
<canvas id="draw" width="640" height="640"></canvas>
<a id="download_link"></a>