دليل مرجعي لـ HTML

كامل قائمة علامات HTML

طريقة quadraticCurveTo() في HTML canvas

quadraticCurveTo() هي طريقة جديدة في API Canvas 2D لإنشاء مسار منحنى بيزاري ثنائي. تحتاج إلى نقطتين. النقطة الأولى هي نقطة التحكم، والنقطة الثانية هي النقطة النهائية. النقطة البدائية هي النقطة الأحدث في المسار الحالي، يمكنك استخدام طريقة moveTo() لتغييرها قبل إنشاء منحنى بيزاري ثنائي.

دليل مرجع HTML canvas

مثال على الإنترنت

رسم منحنى بيزاري ثنائي:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل أساسي لاستخدام طريقة bezierCurveTo() في HTML canvas - (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة HTML5 canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

اختبار لـ ‹/›

تطابق المتصفحات

IEFirefoxOperaChromeSafari

يدعم Internet Explorer 9،Firefox،Opera،Chrome وSafari quadraticCurveTo() الطريقة.

ملاحظة:لا يدعم متصفح Internet Explorer 8 وأحدث إصداراته عنصر <canvas>.

التعريف والاستخدام

مетод quadraticCurveTo() يستخدم النقاط التحكم المحددة لتمثيل منحنى بيزاري ثنائي لضيف نقطة إلى المسار الحالي.

المحيط البيزيير ثنائي يتطلب نقطتين. النقطة الأولى هي نقطة التحكم المستخدمة في الحساب البيزيير ثنائي، والنقطة الثانية هي نقطة النهاية للخط. نقطة البداية للخط هي النقطة الأخيرة في المسار الحالي. إذا لم يكن هناك مسار، فاستخدم beginPath() و moveTo() استخدام الطريقة لتحديد النقطة البداية.

النقطة البداية:

moveTo(20,20)

النقطة التحكم:

quadraticCurveTo(20,100,200,20)

النهاية:

quadraticCurveTo(20,100,200,20)

نصيحة:الرجاء الرجوع إلى bezierCurveTo() الطريقة. لديها نقطان تحكم، وليس نقطة واحدة.

الجملة الجافا سكربت:	السياق.quadraticCurveTo(cpx,cpy,x,y);

قيمة الم 参数

الم 参数	الوصف
cpx	موقع x للنقطة التحكم في البيزيير.
cpy	موقع y للنقطة التحكم في البيزيير.
x	موقع x للنهاية.
y	موقع y للنهاية.

دليل مرجع HTML canvas

HTML: <template> علامة