HTML Canvas से बेज़ियर कर्व (Bezier Curve) बनाना

Canvas पर बेज़ियर कर्व कैसे बनाएं?

HTML Canvas पर बेज़ियर कर्व बनाने के लिए bezierCurveTo() मेथड का उपयोग किया जाता है। यह एक क्यूबिक बेज़ियर कर्व (cubic Bezier curve) बनाता है जिसके लिए दो कंट्रोल पॉइंट और एक अंतिम बिंदु की आवश्यकता होती है।

वाक्यविन्यास (Syntax)

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

पैरामीटर

• cp1x - पहले बेज़ियर कंट्रोल पॉइंट का x-निर्देशांक
• cp1y - पहले बेज़ियर कंट्रोल पॉइंट का y-निर्देशांक
• cp2x - दूसरे बेज़ियर कंट्रोल पॉइंट का x-निर्देशांक
• cp2y - दूसरे बेज़ियर कंट्रोल पॉइंट का y-निर्देशांक
• x - अंतिम बिंदु का x-निर्देशांक
• y - अंतिम बिंदु का y-निर्देशांक

नोट: प्रारंभिक बिंदु (starting point) moveTo() मेथड द्वारा सेट किया जाता है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Canvas Tag</title>
</head>
<body>
  <canvas id="newCanvas" width="550" height="300" style="border: 2px solid blue;"></canvas>
  <script>
    var c = document.getElementById('newCanvas');
    var ctx = c.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(50, 20);              // प्रारंभिक बिंदु
    ctx.bezierCurveTo(100, 150, 200, 100, 200, 50); // कंट्रोल पॉइंट और अंतिम बिंदु
    ctx.stroke();
  </script>
</body>
</html>

आउटपुट

एक घुमावदार रेखा (बेज़ियर कर्व) कैनवास पर खींची जाएगी:

कोड स्पष्टीकरण

1. ctx.moveTo(50, 20) - पथ को (50, 20) पर शुरू करता है।
2. ctx.bezierCurveTo(100, 150, 200, 100, 200, 50) - कर्व बनाता है:
   • पहला कंट्रोल पॉइंट: (100, 150)
   • दूसरा कंट्रोल पॉइंट: (200, 100)
   • अंतिम बिंदु: (200, 50)
3. ctx.stroke() - पथ को स्ट्रोक (रेखा) के साथ खींचता है।

संबंधित मेथड

• quadraticCurveTo(cpx, cpy, x, y) - क्वाड्रेटिक बेज़ियर कर्व (एक कंट्रोल पॉइंट) के लिए।
• strokeStyle, lineWidth, lineCap - कर्व की उपस्थिति अनुकूलित करने के लिए।