菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Canvas arcTo() 方法

❮ Canvas 参考

示例

在画布上的两条切线之间创建一个弧形

您的浏览器不支持 HTML5 canvas 标签。

JavaScript

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

// 开始一个路径
ctx.beginPath();
ctx.moveTo(20, 20);
// 创建一条水平线
ctx.lineTo(100, 20);
// 创建一个弧形
ctx.arcTo(150, 20, 150, 70, 50);
// 创建一条垂直线
ctx.lineTo(150, 120);

// 绘制路径
ctx.stroke();
自己动手试一试 »

更多示例见下文。


描述

arcTo() 方法在路径的两条切线之间添加一个弧形/曲线。

使用 stroke()fill() 方法来绘制路径。

另请参阅

beginPath() 方法 (开始一条新路径)

closePath() 方法 (关闭当前路径)

moveTo() 方法 (将路径移动到指定点)

lineTo() 方法 (向路径添加一条线)

fill() 方法 (填充当前路径)

stroke() 方法 (绘制当前路径)

arc() 方法(在路径上添加一个圆)

bezierCurveTo() 方法 (向路径添加一条贝塞尔曲线)

quadraticCurveTo() 方法 (向路径添加一条二次贝塞尔曲线)


语法

context.arcTo(x1, y1, x2, y2, r)

参数值

参数 描述 试一试
x1 弧形起点的 x 坐标 试一试 »
y1 弧形起点的 y 坐标 试一试 »
x2 弧形终点的 x 坐标 试一试 »
y2 弧形终点的 y 坐标 试一试 »
r 弧形的半径 试一试 »

返回值



更多示例

示例

在两条切线之间创建一个弧形并填充它

您的浏览器不支持 HTML5 canvas 标签。

JavaScript

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

// 开始一个路径
ctx.beginPath();
ctx.moveTo(20, 20);
// 创建一条水平线
ctx.lineTo(100, 20);
// 创建一个弧形
ctx.arcTo(150, 20, 150, 70, 50);
// 创建一条垂直线
ctx.lineTo(150, 120);

// 填充并绘制路径
ctx.fill();
自己动手试一试 »

浏览器支持

<canvas> 元素是 HTML5 标准(2014)。

所有现代浏览器都支持 arcTo()

Chrome Edge Firefox Safari Opera IE
9-11

❮ Canvas 参考
×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持