Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

HTML5 कैनवास पर द्विघात वक्र कैसे बनाएं?


HTML5 <कैनवास> टैग का उपयोग स्क्रिप्टिंग का उपयोग करके ग्राफिक्स, एनिमेशन आदि बनाने के लिए किया जाता है। यह HTML5 में पेश किया गया एक नया टैग है। कैनवास तत्व में एक DOM विधि है जिसे getContext कहा जाता है, जो रेंडरिंग संदर्भ और इसके ड्राइंग फ़ंक्शन प्राप्त करता है। यह फ़ंक्शन एक पैरामीटर लेता है, संदर्भ 2d का प्रकार।

HTML5 कैनवास के साथ एक द्विघात वक्र बनाने के लिए, quadraticCurveTo() विधि का उपयोग करें। यह विधि दिए गए बिंदु को वर्तमान पथ में जोड़ती है, जो दिए गए नियंत्रण बिंदु के साथ एक द्विघात बेज़ियर वक्र द्वारा पिछले एक से जुड़ा होता है।

HTML5 कैनवास पर द्विघात वक्र कैसे बनाएं?

HTML5 कैनवास पर द्विघात वक्र बनाने का तरीका जानने के लिए आप निम्न कोड चलाने का प्रयास कर सकते हैं। quadraticCurveTo() विधि में x और y पैरामीटर समापन बिंदु के निर्देशांक हैं। cpx और cpy नियंत्रण बिंदु के निर्देशांक हैं।

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>

   <body>
      <canvas id="newCanvas" width="500" height="300" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');

         // Draw shapes
         ctx.beginPath();
         ctx.moveTo(75,25);
         ctx.quadraticCurveTo(25,25,25,62.5);
         ctx.quadraticCurveTo(25,100,50,100);
         ctx.quadraticCurveTo(50,120,30,125);
         ctx.quadraticCurveTo(60,120,65,100);
         ctx.quadraticCurveTo(125,100,125,62.5);
         ctx.quadraticCurveTo(125,25,75,25);
         ctx.stroke();
      </script>
   </body>
</html>

आउटपुट

HTML5 कैनवास पर द्विघात वक्र कैसे बनाएं?


  1. एचटीएमएल कैनवास पर गोलाकार आयत कैसे आकर्षित करें?

    HTML में एक आयत बनाने के लिए, कैनवास तत्व का उपयोग करें। कैनवास के साथ, आयत बनाने के लिए रेक्ट () विधि का उपयोग करें। लेकिन, एक गोल आयत बनाने के लिए, रेक्ट () विधि का उपयोग करने से काम नहीं चलेगा। हम एक गोलाकार आयत बनाने के लिए lineTo() और quadraticCurveTo() पद्धति का उपयोग करेंगे। इस प्रकार आप HTML

  1. HTML5 कैनवास के साथ छवियों का उपयोग कैसे करें?

    HTML5 टैग का उपयोग स्क्रिप्टिंग का उपयोग करके ग्राफिक्स, एनिमेशन आदि को आकर्षित करने के लिए किया जाता है। यह HTML5 में पेश किया गया एक नया टैग है। HTML5 कैनवास वाली छवियों का उपयोग करने के लिए, drawImage() विधि का उपयोग करें। यह विधि दी गई छवि को कैनवास पर खींचती है। HTML कैनवास के साथ छवियों का

  1. बेज़ियर वक्र खींचने के लिए HTML कैनवास

    बेज़ियर वक्र बनाने के लिए, HTML में BezierCurveTo () विधि का उपयोग करें। आइए सबसे पहले सिंटैक्स देखें - ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); यहाँ, cp1x - पहले बेज़ियर नियंत्रण बिंदु के x-निर्देशांक का प्रतिनिधित्व करता है cp1y - पहले बेज़ियर नियंत्रण बिंदु के y-निर्देशांक का प्रतिनिधित्व कर