canvas标签arcTo画弧/圆角路径的方法。
绘画右上圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘画右上圆角-HTML教程www.xuandaima.com</title>
</head>
<body>
<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.moveTo(100,20); //创建一个起点
ctx.arcTo(150,20,150,70,30);// 创建弧
ctx.stroke(); //绘画
</script>
</body>
</html>| 说明字段 | 描述 |
|---|---|
| document.getElementById("myCanvas2") | 返回文档id属性为"myCanvas2"的对象 |
| getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型（2 维）的环境，未来可能会支持3维，但现在支持2维。 |
| moveTo(100,20) | 设置开始点的路径（不含划线），X抽为“100”，Y抽为“20” |
| arcTo(150,20,150,70,30) | 圆弧第一个点（150,20）位置，弧度为30，圆弧第二个点（150,70）位置。 |
| stroke() | stroke()绘制当前路径 |
 | 此示例中起点为 100,20。由 (100,20)(x1,y1),(x2,y2) 三点可确定两条直线的位置再由半径确定弧的位置。可通过改变第一个和第二个点位置可改变弧度的方向。 |
绘画左下圆角
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(100,20); //创建一个起点
ctx.arcTo(100,70,150,70,30); // 创建弧
ctx.lineTo(170,70); //创建延长水平线
ctx.stroke(); //绘画注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
context.arcTo(x1,y1,x2,y2,r);
| 参数 | 描述 |
|---|---|
| x1 | 两切线交点的横坐标。 |
| y1 | 两切线交点的纵坐标。 |
| x2 | 第二条切线上一点的横坐标。 |
| y2 | 第二条切线上一点的纵坐标。 |
| r | 弧的半径。 |
