web-dev-qa-db-ja.com

キャンバス全体を特定の色で塗りつぶす方法

HTML5 <canvas>全体を1色で塗りつぶす方法。

CSSを使用して背景色を変更する this などのソリューションを見ましたが、キャンバスは透明なままなので、これは良いソリューションではありません。変化するのは、占有するスペースの色だけです。

別の方法は、キャンバス内に色のあるもの、たとえば長方形を作成することです（ こちらを参照 ）が、キャンバス全体を色で塗りつぶしません（キャンバスが形状よりも大きい場合）作成しました）。

キャンバス全体を特定の色で塗りつぶす解決策はありますか？

javascripthtml5canvas
61
Enve

はい、キャンバス全体に長方形を塗りつぶすだけで、キャンバス自体の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">
101
Spencer Wieczorek
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>
4
Carlos Enrique Hernndez Hernnd

背景explicitlyを行いたい場合は、キャンバス上の現在の要素behindを確実に描画する必要があります。

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);
2
nikk wong

キャンバスグラフィックス用のライブラリ全体があります。これはp5.jsと呼ばれます。head要素に1行だけ追加して、追加の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);
  }
0
Manas Singh

こんにちは、これを行うことでキャンバスの背景を変更できます：

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

  </style>
</head>
0
hednek