html5中绘制圆角矩形的问题

[_Slience_]

请问各位前辈在canvas中使用这三句，
context.moveTo(110, 100);
context.arcTo(200, 100, 200, 200, 10);
context.lineTo(100, 200);
之后的显示效果为什么是
这样，而不是这样呢？
那个arcTo的第二个点的坐标怎么没有生效呢？

[天际的海浪]

第二张图是三条直线和两条弧线，要五条线才能画出来，你三行代码当然画不出来

[_Slience_]

引用 1 楼 jslang 的回复:

第二张图是三条直线和两条弧线，要五条线才能画出来，你三行代码当然画不出来

请问代码第二行的context.arcTo(200, 100, 200, 200, 10);中的后两个200为何没有生效呢？

[天际的海浪]

引用 2 楼 u010513756 的回复:

[quote=引用 1 楼 jslang 的回复:] 第二张图是三条直线和两条弧线，要五条线才能画出来，你三行代码当然画不出来

请问代码第二行的context.arcTo(200, 100, 200, 200, 10);中的后两个200为何没有生效呢？[/quote] http://www.jb51.net/html5/70318.html

[neorobin]

看看 W3C 的说明吧
http://www.w3.org/TR/2014/WD-2dcontext2-20140828/

下面几个图应该解释得很清楚了

[neorobin]

楼主要的效果完全可以不用 lineTo 方法, 而只用 3 个 arcTo 方法实现

context.moveTo(100, 100);
context.arcTo(200, 100, 200, 200, 10);
context.arcTo(200, 190, 200, 190, 0); // 两个控制点重合, 所以效果 = 直线段
context.moveTo(100, 200);
context.arcTo(200, 200, 200, 100, 10);
context.stroke();

[neorobin]

引用 1 楼 jslang 的回复:

第二张图是三条直线和两条弧线，要五条线才能画出来，你三行代码当然画不出来

arcTo 可以画出一段纯粹的弧, 也可以画出一段纯粹的直线, 还可以画出一段直线和一段弧(相切)的衔接组合, 所以 5 条线并不是必须的, 3 个 arcTo 就能实现了