วิธีเติมผ้าใบทั้งผืนด้วยสีเฉพาะ

Question 1

วิธีเติม HTML5 ทั้งหมด<canvas>ด้วยสีเดียว

ฉันเห็นวิธีแก้ปัญหาบางอย่างเช่นนี้เพื่อเปลี่ยนสีพื้นหลังโดยใช้ CSS แต่นี่ไม่ใช่วิธีแก้ปัญหาที่ดีเนื่องจากผืนผ้าใบยังคงโปร่งใสสิ่งเดียวที่เปลี่ยนไปคือสีของพื้นที่ที่มีอยู่

อีกวิธีหนึ่งคือการสร้างบางสิ่งที่มีสีภายในผืนผ้าใบเช่นสี่เหลี่ยมผืนผ้า ( ดูที่นี่ ) แต่ก็ยังไม่เติมสีทั้งผืนผ้าใบ (ในกรณีที่ผืนผ้าใบใหญ่กว่ารูปร่างที่เราสร้างขึ้น)

มีวิธีแก้ไขในการเติมผ้าใบทั้งผืนด้วยสีเฉพาะหรือไม่?

Question 2

ใช่เพียงกรอกสี่เหลี่ยมผืนผ้าด้วยสีทึบบนผืนผ้าใบใช้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">

ขยายข้อมูลโค้ด

Question 3

หากคุณต้องการทำพื้นหลังอย่างชัดเจนคุณต้องมั่นใจว่าคุณวาดอยู่เบื้องหลังองค์ประกอบปัจจุบันบนผืนผ้าใบ

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

Question 4

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>

ขยายข้อมูลโค้ด

Question 5

คุณสามารถเปลี่ยนพื้นหลังของผืนผ้าใบได้โดยทำสิ่งนี้:

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

Question 6

คุณรู้ไหมว่ามีไลบรารีทั้งหมดสำหรับกราฟิกแคนวาส เรียกว่า p5.js คุณสามารถเพิ่มได้ด้วยบรรทัดเดียวในองค์ประกอบส่วนหัวของคุณและไฟล์ sketch.js เพิ่มเติม

ทำสิ่งนี้กับ html และแท็กเนื้อหาของคุณก่อน:

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

Question 7

เราไม่จำเป็นต้องเข้าถึงบริบทผืนผ้าใบ

การดำเนินการhednekใน JS canvas.setAttribute('style', 'background-color:#00F8')บริสุทธิ์คุณจะได้รับ แต่วิธีการที่ต้องการของฉันต้องแปลงKabab กรณีที่จะCamelCase

canvas.style.backgroundColor = '#00F8'