如何用特定颜色填充整个画布? [英] How to fill the whole canvas with specific color?

问题描述

如何用一种颜色填充整个 HTML5 .

How to fill the whole HTML5 <canvas> with one color.

我看到了一些解决方案，例如this背景颜色使用 CSS 但这不是一个好的解决方案，因为画布保持透明，唯一改变的是它占据的空间的颜色.

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.

另一种是通过在画布内部创建具有颜色的东西，例如矩形(参见此处)但它仍然没有用颜色填充整个画布(以防画布大于我们创建的形状).

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?

推荐答案

是的，在画布上用纯色填充一个矩形，使用height和width画布本身:

Yes, fill in a Rectangle with a solid color across the canvas, use the height and width of the canvas itself:

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">

这篇关于如何用特定颜色填充整个画布?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！