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

问题描述

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

此使用CSS更改背景颜色，但这不是一个好的解决方案，因为画布保持透明，唯一的变化是它占据的空间的颜色。

另一个是通过在画布中创建颜色的东西，例如一个矩形（见这里），但它仍然不能用颜色填充整个画布（如果画布大于我们创建的形状）。

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

解决方案

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

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

I saw some solutions such as this to change 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?

解决方案

Yes, just 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屋！