如何用特定的颜色填充整个画布？

javascript html canvas

2022-08-30 04:15:12

如何用一种颜色填充整个HTML5。<canvas>

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

另一种方法是使用画布内的颜色创建一些东西，例如，一个矩形（见此处），但它仍然不会用颜色填充整个画布（以防画布大于我们创建的形状）。

有没有一种解决方案可以用特定的颜色填充整个画布？

答案 1

是的，在画布上用纯色填充矩形，使用画布本身的 and：heightwidth

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

如果要显式执行背景，则必须确保在画布上的当前元素后面绘制。

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