HTML canvas arcTo() 方法

示例

在画布上的两条切线之间创建圆弧：

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.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();                     // 画出来
</script>

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.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();                     // 画出来