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

我想做的事

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

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

如何将其更改为白色？

我尝试了什么

我将以下代码添加到我的代码中,但是效果不佳.我什么都画不出来.

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

}

}

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

解决方法:

您可以使用以下代码设置画布的背景色.

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

标签：javascript,canvas

来源： https://codeday.me/bug/20191011/1891701.html