Javascript 如何用特定颜色填充整个画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27736288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fill the whole canvas with specific color
提问by Enve
How to fill whole HTML5 <canvas>with one color.
如何<canvas>用一种颜色填充整个 HTML5 。
I saw some solutions such as thisto change background color using CSS but this is not a good solution since the canvas remains transparent, the only thing that changes is the color of the space it occupies.
我看到了一些解决方案，如本使用CSS来改变背景颜色，但由于画布保持透明，这不是一个很好的解决方案，那就是改变它占据了空间的颜色的唯一的事。
Another one is by creating something with the color inside the canvas, for example a rectangle(see here) but it still does not fill the whole canvas with the color (in case the canvas is bigger than the shape we created).
另一种方法是通过在画布内创建带有颜色的东西，例如一个矩形（见这里），但它仍然没有用颜色填充整个画布（以防画布比我们创建的形状大）。
Is there a solution to fill the whole canvas with a specific color?
有没有办法用特定颜色填充整个画布？
回答by Spencer Wieczorek
Yes, just fill in a Rectangle with a solid color across the canvas, use the heightand widthof the canvas itself:
是的，只需在画布上用纯色填充一个矩形，使用画布本身的height和width：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);canvas{ border: 1px solid black; }<canvas width=300 height=150 id="canvas">回答by nikk wong
If you want to do the background explicitly, you must be certain that you draw behindthe current elements on the canvas.
如果你想明确地做背景，你必须确定你在画布上的当前元素后面绘制。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Add behind elements.
ctx.globalCompositeOperation = 'destination-over'
// Now draw!
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
回答by Carlos Enrique Hernndez Hernnd
let canvas = document.getElementById('canvas');
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
let ctx = canvas.getContext('2d');
//Draw Canvas Fill mode
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,canvas.width, canvas.height);* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; }<canvas id='canvas'></canvas>回答by hednek
Hi you can change the background of the canvas by doing this:
嗨，您可以通过执行以下操作来更改画布的背景：
<head>
<style>
canvas{
background-color:blue;
}
</style>
</head>
回答by kingmanas
You know what, there is an entire library for canvas graphics. It is called p5.js You can add it with just a single line in your head element and an additional sketch.js file. Do this to your html and body tags first
你知道吗，有一个完整的画布图形库。它被称为 p5.js 您可以在 head 元素中添加一行并添加一个附加的 Sketch.js 文件。首先对您的 html 和 body 标签执行此操作
<html style="margin:0 ; padding:0">
<body style="margin:0 ; padding:0">
Add this to your head:
将此添加到您的头上：
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<script type="text/javascript" src="sketch.js"></script>
The sketch.js file
Sketch.js 文件
function setup() {
createCanvas(windowWidth, windowHeight);
background(r, g, b);
}
