ข้อมูลอ้างอิงHTML

HTML โดยตัวอักษร HTML ตามหมวดหมู่ รองรับ HTML Browser แอตทริบิวต์ HTML HTML Global Attributes เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ ชุดอักขระ HTML HTML Doctypes การเข้ารหัส URL HTML รหัสภาษา HTML รหัสประเทศ HTML ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด


HTML canvas bezierCurveTo() Method

❮ อ้างอิงผ้าใบ HTML

ตัวอย่าง

วาดเส้นโค้งลูกบาศก์เบซิเยร์:

YourbrowserdoesnotsupporttheHTML5canvastag.

จาวาสคริปต์:

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 Firefox โอเปร่า Google Chrome ซาฟารี

Internet Explorer 9, Firefox, Opera, Chrome และ Safari รองรับเมธอด bezierCurveTo()


ความหมายและการใช้งาน

bezierCurveTo() วิธีการเพิ่มจุดไปยังเส้นทางปัจจุบันโดยใช้จุดควบคุมที่ระบุซึ่งแสดงถึงเส้นโค้งลูกบาศก์เบซิเยร์

เส้นโค้งลูกบาศก์เบซิเยร์ต้องการสามจุด สองจุดแรกคือจุดควบคุมที่ใช้ในการคำนวณลูกบาศก์เบซิเยร์ และจุดสุดท้ายคือจุดสิ้นสุดของเส้นโค้ง จุดเริ่มต้นของเส้นโค้งคือจุดสุดท้ายในเส้นทางปัจจุบัน หากไม่มีเส้นทาง ให้ใช้ เมธอด beginPath()และ 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 () มีจุดควบคุมหนึ่งจุดแทนที่จะเป็นสองจุด


ไวยากรณ์ JavaScript: บริบท .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