如何使用 JavaScript 将画布的背景颜色设为白色？

Question

我想做的事

我想知道如何使背景颜色变白。

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

怎么改成白色？

我试过的

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

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

在画布上，您可以getAttribute()用来检索尺寸。看我的片段：let canvas = document.getElementById('canvas');let cheight = parseInt(canvas.getAttribute("height"));let cwidth = parseInt(canvas.getAttribute("width"));let context = canvas.getContext('2d');context.fillStyle = "green";context.fillRect(0,0,cwidth,cheight);<canvas width="200" height="200" id="canvas">

Answer 2

您可以使用以下代码设置画布的背景颜色。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">

Answer 3

在您的draw()函数中，您需要专门添加这样的背景：const canvas = document.querySelector('#draw');const ctx = canvas.getContext('2d');ctx.strokeStyle = '#BADA55';ctx.fillStyle = "#ffffff"; //HERE, use HEX format in 6 digitsctx.fillRect(0, 0, canvas.width, canvas.height); //HERE&nbsp;...function draw(e) {&nbsp; &nbsp; ...}为什么？您需要在所有内容之前绘制背景，否则一遍又一遍地绘制背景，或者在所有内容之上都会导致白色矩形与画布上的所有内容重叠。