নির্দিষ্ট রঙের সাথে পুরো ক্যানভাসটি কীভাবে পূরণ করবেন

Question 1

কীভাবে <canvas>একটি রঙের সাথে পুরো এইচটিএমএল 5 পূরণ করতে হয়।

আমি যেমন কিছু সমাধান দেখেছি এই শুধু পরিবর্তন স্থান এটা দখল করে রঙ, সিএসএস ব্যবহার পটভূমির রঙ পরিবর্তন করতে কিন্তু এই একটি ভাল সমাধান যেহেতু ক্যানভাস স্বচ্ছ রয়ে নয়।

আর একটি হ'ল ক্যানভাসের অভ্যন্তরের রঙের সাথে কিছু তৈরি করে, উদাহরণস্বরূপ একটি আয়তক্ষেত্র ( দেখুন এখানে ) তবে এটি এখনও পুরো ক্যানভাসটি রঙের সাথে পূরণ করে না (যদি ক্যানভাসটি আমরা তৈরি আকারের চেয়ে বড় হয়)।

কোনও নির্দিষ্ট রঙ দিয়ে পুরো ক্যানভাস পূরণ করার কোনও সমাধান আছে?

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 বলা হয় আপনি এটি আপনার মাথা উপাদানটিতে একটি মাত্র লাইন এবং একটি অতিরিক্ত স্কেচ.জেএস ফাইল যুক্ত করতে পারেন।

প্রথমে আপনার এইচটিএমএল এবং বডি ট্যাগগুলিতে এটি করুন:

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

স্কেচ.জেএস ফাইল

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(r, g, b);
}