6个回答
263
用实色填充矩形横穿整个画布，使用画布本身的 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
2
39
如果您想要明确地设置背景，您必须确定在画布上绘制当前元素的后面。
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);
- nikk wong
4
7感谢您意识到人们不仅仅想要一个纯色块作为图片！ - FamousAv8er
这实际上应该是“destination-under”，并且它应该是画布上的第一个操作。 - Ciprian
@Ciprian：如果你使用“destination-over”，它不需要是第一个操作。这种模式指定目标（画布的当前内容）将覆盖你要绘制的内容。 - undefined
@awe 我相信你。我在Canvas方面的经验有限 :) - undefined
20
你可以通过以下方式更改画布的背景：
<head>
<style>
canvas {
background-color: blue;
}
</style>
</head>
- hednek
2
2@Enve说他或她不想使用CSS。 - user8903269
8不适用于OP，但对于那些在搜索标题中的问题的人可能会有用。 - Dror Bar
8
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>- Carlos Enrique Hernndez Hernnd
4
我们不需要访问画布上下文。
如果使用纯JS实现 hednek，你会得到这样的代码：canvas.setAttribute('style', 'background-color:#00F8')。但是我更喜欢的方法需要将kabab-case转换为camelCase。
canvas.style.backgroundColor = '#00F8'
- A. West
1
使用动态添加形状的方法可能会出现显示问题。 - titusfx
-1
你知道吗，有一个完整的画布图形库，它被称为 p5.js。你只需要在 head 标签中添加一行代码和一个额外的 sketch.js 文件就可以使用它了。
首先对你的 html 和 body 标签这样操作：
将以下代码添加到标签中：
首先对你的 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);
}
- Manas Singh
2
2请注意，
p5.js 经过压缩和 gzip 处理后只有 340kB！我认为这个页面包含了一些更轻量级的选项。 - kano@kano 我写这篇答案时还是个新手，现在已经过了很长时间了。 - Manas Singh
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
ctx.fillStyle="rgb(0,0,255)"fillStyle。 - Carson