javascript - 如何使用 JavaScript 将 Canvas 的背景色设为白色？

Question

我想做什么

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

我用 Canvas 构建了一个绘图应用程序。您可以通过单击下载按钮下载您绘制的 Canvas 图像。但它的背景颜色是黑色(技术上透明)。

我怎样才能把它变成白色？

---

我尝试了什么

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

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

---

这是我的代码

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#BADA55';

  ...

function draw(e) {
  if (!isDrawing) return;
  console.log(e);
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  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);

  ...

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();
  }
}

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

Answer 1

您可以使用以下代码设置 Canvas 的背景颜色。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "green";
context.fillRect(0, 0, canvas.width, canvas.height);

canvas{ border: 1px solid black; }

<canvas width=300 height=150 id="canvas">