CanvasRenderingContext2D:quadraticCurveTo() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.quadraticCurveTo() 方法用于新增二次贝塞尔曲线路径。它需要 2 个点。第一个点是控制点,第二个点是终点。起始点是当前路径最新的点——在创建二次贝赛尔曲线之前,可以使用 moveTo() 方法进行改变。

语法

js
quadraticCurveTo(cpx, cpy, x, y)

参数

cpx

控制点的 x 轴坐标。

cpy

控制点的 y 轴坐标。

x

终点的 x 轴坐标。

y

终点的 y 轴坐标。

返回值

无(undefined)。

示例

quadraticCurveTo 如何工作

这个示例展示如何绘制二次贝赛尔曲线。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// 起始点和结束点
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI); // 起始点
ctx.arc(50, 100, 5, 0, 2 * Math.PI); // 结束点
ctx.fill();

// 控制点
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();

结果

在这个示例中,控制点是红色的,起始点和结束点是蓝色的。

简单的二次曲线

此示例使用 quadraticCurveTo() 绘制了简单的二次贝塞尔曲线。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

曲线从 moveTo() 指定的点开始:(20, 110)。控制点位于 (230, 150)。曲线在 (250, 20) 处结束。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 110);
ctx.quadraticCurveTo(230, 150, 250, 20);
ctx.stroke();

结果

规范

Specification
HTML
# dom-context-2d-quadraticcurveto-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
quadraticCurveTo

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support