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

HTML5 कैनवास के साथ बेज़ियर कर्व बनाएं


हाँ, HTML5 में बेज़ियर कर्व बनाने के लिए HTML कैनवास bezierCurveTo() मेथड का उपयोग करें।

उदाहरण

कैनवास के साथ बेज़ियर कर्व बनाने के लिए आप निम्न कोड आज़मा सकते हैं:

 <!DOCTYPE HTML> <html>    <head>       <style>          #test {             width: 100px;             height:100px;             margin: 0px auto;          }       </style>       <script>          function drawShape(){             // DOM का उपयोग करके कैनवास एलिमेंट प्राप्त करें             var canvas = document.getElementById('mycanvas');             // सुनिश्चित करें कि कैनवास समर्थित न होने पर कोड न चले             if (canvas.getContext){                // ड्राइंग के लिए कैनवास का उपयोग करने के लिए getContext                var ctx = canvas.getContext('2d');                ctx.beginPath();                ctx.moveTo(75,40);                ctx.bezierCurveTo(75,37,70,25,50,25);                ctx.bezierCurveTo(20,25,20,62.5,20,62.5);                ctx.bezierCurveTo(20,80,40,102,75,120);                ctx.bezierCurveTo(110,102,130,80,130,62.5);                ctx.bezierCurveTo(130,62.5,130,25,100,25);                ctx.bezierCurveTo(85,25,75,37,75,40);                ctx.fill();             } else {                alert('इस डेमो को देखने के लिए आपको Safari या Firefox 1.5+ चाहिए।');             }          }       </script>    </head>    <body id = "test" onload = "drawShape();">       <canvas id = "mycanvas"></canvas>    </body> </html>

आउटपुट

HTML5 कैनवास के साथ बेज़ियर कर्व बनाएं


  1. HTML5 कैनवास का उपयोग करके तारा (Star) कैसे बनाएं? HTML5 कैनवास का उपयोग करके तारा (Star) कैसे बनाएं?

    HTML कैनवास पर ड्राइंग जावास्क्रिप्ट के साथ की जाती है। कैनवास पर ड्राइंग से पहले getElementById() और getContext() HTML DOM मेथड्स का उपयोग करें। HTML में तारा बनाने के लिए कैनवास एलिमेंट का उपयोग करें।कैनवास के साथ, तारा बनाने के लिए lineTo() मेथड का उपयोग करें। lineTo() मेथड में x और y पैरामीटर मा

  1. HTML5 कैनवास के साथ इमेज का उपयोग कैसे करें? HTML5 कैनवास के साथ इमेज का उपयोग कैसे करें?

    HTML5 <canvas> टैग का उपयोग स्क्रिप्टिंग के माध्यम से ग्राफिक्स, एनिमेशन आदि बनाने के लिए किया जाता है। HTML5 कैनवास के साथ इमेज का उपयोग करने के लिए drawImage() मेथड का उपयोग करें। यह मेथड दी गई इमेज को कैनवास पर बनाता है।उदाहरणHTML कैनवास के साथ इमेज का उपयोग करने का तरीका सीखने के लिए निम्न

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

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