HTML कैनवास bezierCurveTo () विधि
उदाहरण
क्यूबिक बेज़ियर वक्र बनाएं:
जावास्क्रिप्ट:
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();
ब्राउज़र समर्थन
Internet Explorer 9, Firefox, Opera, Chrome और Safari bezierCurveTo() पद्धति का समर्थन करते हैं।
परिभाषा और उपयोग
BezierCurveTo () विधि निर्दिष्ट नियंत्रण बिंदुओं का उपयोग करके वर्तमान पथ में एक बिंदु जोड़ती है जो एक घन बेज़ियर वक्र का प्रतिनिधित्व करती है।
एक घन बेजियर वक्र के लिए तीन बिंदुओं की आवश्यकता होती है। पहले दो बिंदु नियंत्रण बिंदु हैं जो क्यूबिक बेज़ियर गणना में उपयोग किए जाते हैं और अंतिम बिंदु वक्र के लिए अंतिम बिंदु है। वक्र का प्रारंभिक बिंदु वर्तमान पथ का अंतिम बिंदु है। यदि कोई पथ मौजूद नहीं है, तो प्रारंभिक बिंदु को परिभाषित करने के लिए startPath() और 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() विधि देखें । इसमें दो के बजाय एक नियंत्रण बिंदु है।
| जावास्क्रिप्ट सिंटैक्स: | संदर्भ .bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ); |
|---|
पैरामीटर मान
| Parameter | Description | Play it |
|---|---|---|
| cp1x | The x-coordinate of the first Bézier control point | |
| cp1y | The y-coordinate of the first Bézier control point | |
| cp2x | The x-coordinate of the second Bézier control point | |
| cp2y | The y-coordinate of the second Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ HTML कैनवास संदर्भ