简体   繁体   English

如何清除和更改画布的背景颜色?

[英]How do I clear and change background colour of a canvas?

Background colour has to be changed with the colour I'm drawing with. 背景颜色必须使用我绘制时使用的颜色进行更改。

So if i'm drawing with the colour red on the canvas I want to click the clear button and the canvas div will clear all the drawings and change the background colour to red. 因此,如果我在画布上使用红色绘画,我想单击清除按钮,画布div将清除所有绘画并将背景颜色更改为红色。

Here is what I have so far but I don't know how to change the colour to the one I have selected 这是我到目前为止的东西,但我不知道如何将颜色更改为我选择的颜色

function ClearCanvas(sColour) {
    DebugMessage("Clear Canvas");
    const context = oCanvas.getContext('2d');
    context.clearRect(0, 0, oCanvas.width, oCanvas.height);
    document.getElementById("1Canvas").style.background = "____";
}

When you draw a color on the canvas, you need to change the fillStyle to the color you wish. 在画布上绘制颜色时,需要将fillStyle更改为所需的颜色。 Changing the background-color of a canvas won't work. 更改画布的背景颜色将无效。

 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const colors = ["blue", "green", "red", "pink", "purple", "grey", "black"]; function draw(color) { //This line is actually not even needed... ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.rect(0, 0, canvas.width, canvas.height); ctx.fillStyle = color; ctx.fill(); } let i = 0; setInterval(() => { draw(colors[i]); i = (i + 1) % colors.length; }, 1000); 
 <canvas id="canvas"> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM