masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > Bagaimana untuk melukis lengkung Bezier menggunakan Kanvas HTML5?

Bagaimana untuk melukis lengkung Bezier menggunakan Kanvas HTML5?

WBOY
Lepaskan： 2023-09-02 20:21:05
ke hadapan
1405 orang telah melayarinya

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>
Salin selepas log masuk

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!

sumber：tutorialspoint.com
Artikel sebelumnya：Tutorial OpenCart: Menyesuaikan Kaedah Penghantaran (Bahagian 1) Artikel seterusnya：Tetapkan bahasa data teks runut dalam HTML kepada bahasa Cina
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2052
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2206
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1862
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1749
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1772
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan