Metode HTML canvas quadraticCurveTo()
Definisi dan penggunaan
quadraticCurveTo() metode untuk menambahkan titik ke jalur saat ini dengan menggunakan titik pengawal yang menandakan garis kuadratik Bezier.
Petikan:Garis kuadratik Bezier memerlukan dua titik. Pertama adalah titik pengawal untuk kalkulasi kuadratik Bezier, kedua adalah titik akhir garis. Titik awal garis adalah titik terakhir di jalur sekarang. Jika jalur tidak ada, silakan gunakan beginPath() dan moveTo() metode untuk menentukan titik awal.
- Titik awal: moveTo(
20,20) - Titik pengawal: quadraticCurveTo(
20,100,200,20) - Titik akhir: quadraticCurveTo(20,100,
200,20)
Petikan:Lihat Metode bezierCurveTo()。Ia mempunyai dua titik pengawal, bukannya satu.
Contoh
Menggambar garis kuadratik Bezier:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
语法
context.quadraticCurveTo(cpx,cpy,x,y);
参数值
| 参数 | 描述 |
|---|---|
| cpx | 贝塞尔控制点的 x 坐标。 |
| cpy | 贝塞尔控制点的 y 坐标。 |
| x | 结束点的 x 坐标。 |
| y | 结束点的 y 坐标。 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
