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 ਸਫਾਰੀ ਓਪਰਾ
Chrome Edge Firefox ਸਫਾਰੀ ਓਪਰਾ
4.0 9.0 3.6 4.0 10.1

ਟਿੱਪਣੀਆਂ:Internet Explorer 8 ਅਤੇ ਇਸ ਤੋਂ ਪਹਿਲੇ ਦੀਆਂ ਸੰਸਕਰਣਾਂ ਵਿੱਚ <canvas> ਐਲੀਮੈਂਟ ਸਮਰੱਥ ਨਹੀਂ ਹੈ。

Canvas ਸੰਦਰਭ ਮੈਨੂਅਲ