Canvas bezierCurveTo() विधि

Canvas संदर्भ दस्तावेज

वर्णन और उपयोग

bezierCurveTo() विधि का उपयोग करके तीन बिन्दुओं के द्वारा त्रिगुण बेजेल कर्व को परिभाषित करने वाले बिन्दु को मौजूदा पथ में जोड़ें。

सूचना:त्रिगुण बेजेल कर्व के लिए तीन बिन्दुओं की आवश्यकता होती है। पहले दो बिन्दु त्रिगुण बेजेल गणना में इस्तेमाल होते हैं और तीसरा बिन्दु कर्व का समाप्त बिन्दु है। कर्व का शुरूआती बिन्दु मौजूदा पथ के अंतिम बिन्दु है। यदि पथ मौजूद नहीं है, तो कृपया beginPath() और moveTo() विधि के द्वारा शुरूआती बिन्दु को परिभाषित करने के लिए

तीन बेर्सेल कर्विल
  • शुरूआती बिन्दु: moveTo(20,20)
  • नियंत्रण बिन्दु 1: bezierCurveTo(20,100,200,100,200,20)
  • नियंत्रण बिन्दु 2: bezierCurveTo(20,100,200,100,200,20)
  • समाप्त बिन्दु: bezierCurveTo(20,100,200,100,200,20)

सूचना:देखें quadraticCurveTo() विधि। यह दो बजाय एक नियंत्रण बिन्दु है。

उदाहरण

एक त्रिगुण बेजेल कर्व का ड्राइंग करें:

आपका ब्राउज़र HTML5 कैनवस टैग को समर्थन नहीं देता है。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

खुद आज्ञा दें

व्याकरण

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

पारामीटर मूल्य

पारामीटर वर्णन
cp1x पहले बेजेल नियंत्रण बिन्दु की x स्थिति
cp1y पहले बेजेल नियंत्रण बिन्दु की y स्थिति
cp2x दूसरे बेजेल नियंत्रण बिन्दु की x स्थिति
cp2y दूसरे बेजेल नियंत्रण बिन्दु की y स्थिति
x समाप्त बिन्दु की x स्थिति
y समाप्त बिन्दु की y स्थिति

ब्राउज़र समर्थन

तालिका में दिए गए नंबर को पहली बार इस गुण को पूरी तरह से समर्थन देने वाले ब्राउज़र का संस्करण के रूप में दिया गया है。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

टिप्पणी:Internet Explorer 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट को समर्थन नहीं देते।

Canvas संदर्भ दस्तावेज