如何在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);

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

Answer 1

删除此行ctx.globalCompositeOperation&nbsp;=&nbsp;'hue';这就是让你的笔触在白色背景上变白的原因。