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

91

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

我看到了一些解决方案，如本使用CSS来改变背景颜色，但由于画布保持透明，这不是一个很好的解决方案，那就是改变它占据了空间的颜色的唯一的事。

另一种方法是通过在画布内部创建带有颜色的东西，例如矩形（请参见此处），但仍然不能用颜色填充整个画布（以防画布大于我们创建的形状）。

是否有解决方案，以特定的颜色填充整个画布？

javascript html canvas

— ve
source

150

是的，只需填写一个矩形在画布纯色，使用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">

展开摘要

— 斯宾塞·维克佐雷克（Spencer Wieczorek）
source

16

如果要明确地做背景，则必须确保在画布上的当前元素后面绘制。

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

— 尼克·黄
source

4

感谢您意识到人们可能不仅希望将彩色图像用作图像！

— –FamousAv8er

6

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>

展开摘要

— 卡洛斯·恩里克·赫恩德斯·赫恩德
source

6

您可以通过执行以下操作来更改画布的背景：

<head>
    <style>
        canvas {
            background-color: blue;
        }
    </style>
</head>

— 赫德内克
source

1

@Enve说他或她希望它不使用CSS。

0

你知道吗，有一个完整的画布图形库。它称为p5.js。您可以在head元素中仅添加一行，并添加一个sketch.js文件。

首先对您的html和body标签执行此操作：

<html style="margin:0 ; padding:0">
<body style="margin:0 ; padding:0">

将此添加到您的头上：

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

sketch.js文件

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}

— 金马纳斯
source

请注意，p5.js将其340kB最小化并压缩！我想说的是，此页面包含一些更轻量级的选项

— 。– kano

@kano我只是菜鸟时写了这个答案。从那以后已经很久了。

— kingmanas