Using the canvas element for graphics and animations html in hindi
HTML5 वेब डेवलपमेंट स्ट्रक्चर लैंग्वेज में <canvas> टैग एलिमेंट के साथ जावास्क्रिप्ट इंटरैक्टिव वेब डेवलपमेंट स्क्रिप्ट का यूज़ करके डायरेक्ट क्लाइंट वेब ब्राउज़र में ग्राफ़िक्स और एनिमेशन क्रिएट और उनमें मॉडिफिकेशन करने के फीचर्स और कण्ट्रोल प्रोवाइड करता है। HTML5 वेबपेज वेबसाइट में <canvas> टैग एलिमेंट का यूज़ न्यूमेरिकल डाटा बेस्ड चार्ट, स्माल ग्राफिकल गेम और इंटरैक्टिव यूजर डिफाइन ग्राफ़िक्स इमेजेज जैसे काम्प्लेक्स विज़ुअल कंटेंट डाटा आदि क्रिएट करने में बहुत अधिक किया जाता है।
So, let’s learn more about the features and functions of the <canvas> element for graphics and animation in HTML5 web development.
HTML5 वेब डेवलपमेंट में <canvas> एलिमेंट का बेसिक स्ट्रक्चर।
The purpose of the <canvas> element.
वेब डेवलपर डिज़ाइन HTML5 वेब डेवलपमेंट स्क्रिप्ट में <canvas> टैग एलिमेंट जावास्क्रिप्ट लैंग्वेज के यूज़ के साथ काम्प्लेक्स ग्राफ़िक और इमेजेज स्ट्रक्चर लेआउट डिज़ाइन करने में एक कंटेनर की तरह काम करता है।
Basic <canvas> element syntax.
<canvas id=”sampleCanvas” width=”300″ height=”500″></canvas>
HTML5 <canvas> element tag attributes.
- id – यह डिज़ाइन कैनवस ऑब्जेक्ट एलिमेंट के लिए एक यूनिक जावास्क्रिप्ट में आइडेंटिफ़ायर का रोल प्ले करता है।
- width – यह डिज़ाइन कैनवस ऑब्जेक्ट की विड्थ को पिक्सल में डिस्प्ले करता है।
- height – यह डिज़ाइन कैनवस ऑब्जेक्ट की हाइट को पिक्सल में डिस्प्ले करता है।
Example of HTML5 <canvas> element tag attributes.
<canvas id=”testCanvas” width=”400″ height=”500″></canvas>
Drawing on a canvas element.
किसी कैनवस एलिमेंट पर ड्रॉइंग ऑब्जेक्ट क्रिएट करने के लिए, वेब डेवलपर को ड्रॉइंग कॉन्टेक्स्ट को एक्सेस करने के लिए जावास्क्रिप्ट प्रोग्रामिंग लैंग्वेज का यूज़ करना पड़ता है। सबसे बेसिक कैनवास कॉन्टेक्स्ट यहाँ 2d है, लेकिन आप जरूरत पड़ने पर 3D ग्राफ़िक्स के लिए webgl जैसे दूसरे कॉन्टेक्स्ट भी क्रिएट कर सकते हैं।
Creating the Context in Javascript.
<!DOCTYPE html>
<html>
<head>
<title>Lets try 2D Context Canvas Attributes </title>
</head>
<body>
<canvas id=”sampleCanvas” width=”400″ height=”200″ style=”border:2px solid red;”></canvas>
<script>
// here we Get the canvas element
const canvas = document.getElementById(‘sampleCanvas’);
// here we Get the 2D drawing object context
const cntx = canvas.getContext(‘2d’);
// here it Draw something to prove it works or not
cntx.fillStyle = ‘yellow’;
cntx.fillRect(20, 20, 200, 100);
// here we Draw text in drawings object
cntx.font = ’20px times new roman’;
cntx.fillStyle = ‘blue’;
cntx.fillText(‘Vcanhelpsu’, 40, 70);
</script>
</body>
</html>
Basic canvas drawing operation.
html मार्कअप लैंग्वेज के यूज़ के साथ जावास्क्रिप्ट में एक रेक्टेंगल शेप बनाने का कोड।
<!DOCTYPE html>
<html>
<head>
<title>Lets try Canvas Rectangle Attributes</title>
</head>
<body>
<canvas id=”sampleCanvas” width=”200″ height=”200″ style=”border:2px solid green;”></canvas>
<script>
// here we Get the canvas element with javascipt
const canvas = document.getElementById(‘sampleCanvas’);
// here we Get the 2D drawing context element
const ctx = canvas.getContext(‘2d’);
// here we Set the fill color for canvas object
ctx.fillStyle = ‘red’;
// Draw a filled rectangle
ctx.fillRect(20, 20, 120, 80);
</script>
</body>
</html>
Drawing a circle using JavaScript canvas.
html मार्कअप लैंग्वेज के यूज़ के साथ जावास्क्रिप्ट में एक सर्किल शेप बनाने का कोड।
<!DOCTYPE html>
<html>
<head>
<title> Lets try Canvas Circle Attributes </title>
</head>
<body>
<canvas id=”sampleCanvas” width=”500″ height=”500″ style=”border:3px solid lime;”></canvas>
<script>
// here we Get canvas element and add context
const canvas = document.getElementById(‘sampleCanvas’);
const cntx = canvas.getContext(‘2d’);
// here we Start a new path
cntx.beginPath();
// here we Draw a basic circle x, y, radius angle, startAngle, endAngle, etc
cntx.arc(250, 250, 140, 0, 3 * Math.PI);
// here we Set the stroke color
cntx.strokeStyle = ‘blue’;
// here we Draw the outline canvas object
cntx.stroke();
</script>
</body>
</html>
Drawing a text using JavaScript canvas.
html मार्कअप लैंग्वेज के यूज़ के साथ जावास्क्रिप्ट में एक टेक्स्ट ऑब्जेक्ट बनाने का कोड।
<!DOCTYPE html>
<html>
<head>
<title>Lets try Canvas Text Attributes </title>
</head>
<body>
<canvas id=”sentancesCanvas” width=”500″ height=”200″ style=”border:3px solid red;”></canvas>
<script>
// here we Get canvas and its context
const canvas = document.getElementById(‘sentancesCanvas’);
const cntx = canvas.getContext(‘2d’);
// here we Set the font name for canvas drawing text
cntx.font = ’40px monotype corsiva’;
// here we Set fill text color
cntx.fillStyle = ‘blue’;
// here we Draw text content information
cntx.fillText(‘Vcanhelpsu Edtech’, 70, 100);
</script>
</body>
</html>
Using animation with the JavaScript <canvas> tag element.
html5 में जावास्क्रिप्ट कैनवास एलिमेंट का यूज़ कर एनिमेशन क्रिएट करने के लिए, वेब डेवलपर कैनवस कंटेंट को मल्टीप्ल टाइम वेबपेज में अपडेट करने के लिए जावास्क्रिप्ट लैंग्वेज का यूज़ कर सकते हैं। यह सामान्य रूप से जावास्क्रिप्ट में requestAnimationFrame फ़ंक्शन का यूज़ करके किया जाता है. जो मौजूदा कैनवास एलिमेंट में नेक्स्ट अपडेट को अगले रीपेंट पर शेड्यूल कर मूव करता है।
Basic JavaScript canvas element animation example.
<!DOCTYPE html>
<html>
<head>
<title>Lets try Canvas Animation Attributes </title>
</head>
<body>
<canvas id=”animationCanvas” width=”500″ height=”200″ style=”border:2px solid lime;”></canvas>
<script>
const canvas = document.getElementById(‘animationCanvas’);
const cntx = canvas.getContext(‘2d’);
let p = 0;
const speed = 3;
function draw() {
// here we Clear the canvas element
cntx.clearRect(0, 0, canvas.width, canvas.height);
// here we Draw a rectangle canvas with object element
cntx.fillStyle = ‘yellow’;
cntx.fillRect(p, 70, 140, 70);
// here we Update position
p += speed;
// here we Reset the position if it goes off-screen during preview
if (p > canvas.width) {
p = -40;
}
// here it Loop canvas animation
requestAnimationFrame(draw);
}
// here it Start animation
draw();
</script>
</body>
</html>
Advanced graphics and effects with canvas in JavaScript.
जावास्क्रिप्ट वेबपेज में इमेज ड्रॉइंग, ग्रेडिएंट और पैटर्न, लीनियर ग्रेडिएंट, पैटर्न ऑब्जेक्ट को इन्सर्ट और ड्रा करने के लिए वेब डेवलपर जावास्क्रिप्ट कैनवास के साथ ड्राइंग इमेज को क्रिएट कर सकते है.
Group JavaScript canvas, Image Drawing, Gradient and Pattern, Linear Gradient, element Html example.
<!DOCTYPE html>
<html>
<head>
<title>Lets try Canvas Image, Gradient, and Pattern javascript attributes </title>
</head>
<body>
<canvas id=”testCanvas” width=”500″ height=”500″ style=”border:2px solid lime;”></canvas>
<script>
const canvas = document.getElementById(‘testCanvas’);
const cntx = canvas.getContext(‘2d’);
// here we Draw gradient image background
const gradient = cntx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, ‘yellow’);
gradient.addColorStop(1, ‘lime’);
cntx.fillStyle = gradient;
cntx.fillRect(0, 0, canvas.width, canvas.height);
// here we Load and draw main image on top position
const imag = new Image();
imag.src = ‘https://www.magnific.com/free-vector/grainy-gradient-background-orange-pink-purple_154661240.htm/400×300.jpg’;
imag.onload = function() {
cntx.drawImage(imag, 130, 120, 270, 190);
};
// here we Load and apply pattern overlay
const patternImg = new Image();
patternImg.src = ‘https://www.magnific.com/free-vector/vibrant-summer-ombre-background-vector_15847314/100×1000.png’;
patternImg.onload = function() {
const pattern = cntx.createPattern(patternImg, ‘repeat’);
// here we Use transparency, so underlying content is visible
cntx.globalAlpha = 0.4;
cntx.fillStyle = pattern;
cntx.fillRect(0, 0, canvas.width, canvas.height);
// here we Reset alpha value
cntx.globalAlpha = 2.0;
};
</script>
</body>
</html>
