如何用特定颜色填充整个画布？
[英]How to fill the whole canvas with specific color?
问题描述
How to fill the whole HTML5 <canvas> with one color.
如何用一种颜色填充整个 HTML5 <canvas> 。
I saw some solutions such as this to change the 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?有没有办法用特定颜色填充整个画布？
6 个解决方案
解决方案1
194 已采纳 2015-01-02 01:14:12
Yes, fill in a Rectangle with a solid color across the canvas, use the height and width of 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">
解决方案2
31 2019-05-10 23:14:00
If you want to do the background explicitly , you must be certain that you draw behind the 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);
解决方案3
14 2018-04-26 21:24:03
You can change the background of the canvas by doing this:您可以通过执行以下操作来更改画布的背景：
<head>
<style>
canvas {
background-color: blue;
}
</style>
</head>
解决方案4
7 2018-04-10 04:41:52
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>
解决方案5
1 2018-07-16 14:18:01
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.它被称为 p5.js 您可以在 head 元素中添加一行并添加一个附加的 Sketch.js 文件。
Do this to your html and body tags first:首先对您的 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);
}
解决方案6
1 2020-11-18 15:09:32
We don't need to access the canvas context.我们不需要访问画布上下文。
Implementing hednek in pure JS you would get canvas.setAttribute('style', 'background-color:#00F8') .在纯 JS 中实现hednek你会得到canvas.setAttribute('style', 'background-color:#00F8') 。 But my preferred method requires converting the kabab-case to camelCase .但我的首选方法需要将kabab-case转换为camelCase 。
canvas.style.backgroundColor = '#00F8'
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.