Rumah >hujung hadapan web >html tutorial >Bagaimana untuk melukis lengkung Bezier menggunakan Kanvas HTML5?

Bagaimana untuk melukis lengkung Bezier menggunakan Kanvas HTML5?

WBOY
WBOYke hadapan
2023-09-02 20:21:051398semak imbas

Teg

HTML5 digunakan untuk melukis grafik, animasi, dsb. menggunakan skrip. Ia adalah teg baharu yang diperkenalkan dalam HTML5. Elemen kanvas mempunyai kaedah DOM yang dipanggil getContext, yang memperoleh konteks pemaparan dan fungsi lukisannya. Fungsi ini mengambil satu hujah, jenis konteks 2d.

Untuk melukis lengkung Bezier menggunakan kanvas HTML5, gunakan kaedah bezierCurveTo(). Kaedah ini menambah titik yang diberikan pada laluan semasa, menyambungkannya ke laluan sebelumnya melalui lengkung Bezier padu dengan titik kawalan yang diberikan.

如何使用HTML5 Canvas绘制贝塞尔曲线?

Anda boleh cuba menjalankan kod berikut untuk mengetahui cara melukis lengkung Bezier pada Kanvas HTML5. Parameter x dan y dalam kaedah bezierCurveTo() ialah koordinat titik akhir. cp1x dan cp1y ialah koordinat bagi titik kawalan pertama, dan cp2x dan cp2y ialah koordinat bagi titik kawalan kedua.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>

<body>
<canvas id = "newCanvas" width = "500" height = "300" style = "border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById(&#39;newCanvas&#39;);
var ctx = c.getContext(&#39;2d&#39;);
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
</script>

</body>
</html>

Output

如何使用HTML5 Canvas绘制贝塞尔曲线?

Atas ialah kandungan terperinci Bagaimana untuk melukis lengkung Bezier menggunakan Kanvas HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam