[javascript] 전체 캔버스를 특정 색상으로 채우는 방법

Program / 글쓴이

전체 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">

스 니펫 확장

답변

배경을 명시 적으로 수행 하려면 캔버스의 현재 요소 뒤에 그려야 합니다.

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

답변

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>

스 니펫 확장

답변

다음을 수행하여 캔버스의 배경을 변경할 수 있습니다.

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

답변

캔버스 그래픽을위한 전체 라이브러리가 있습니다. 이것은 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);
}

답변