如何在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的// Canvasconst 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 = 'hue';

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