Env*_*nve 68 javascript html5 canvas
如何<canvas>用一种颜色填充整个HTML5 .
我看到了一些像这样的解决方案来改变背景颜色使用CSS,但这不是一个好的解决方案,因为画布保持透明,唯一改变的是它占据的空间的颜色.
另一个是通过在画布内创建具有颜色的东西,例如矩形(参见此处),但它仍然没有用颜色填充整个画布(如果画布大于我们创建的形状).
是否有解决方案用特定颜色填充整个画布？
Spe*_*rek 113
是的,只需填写与在画布纯色的矩形,使用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">nik*_*ong 30
如果你想明确地做背景，你必须确定你在画布上的当前元素后面绘制。
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);
小智 13
您可以通过执行以下操作来更改画布的背景：
<head>
<style>
canvas {
background-color: blue;
}
</style>
</head>
小智 5
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>