3.7w+
社区成员
- 主页
- 问答
html5中绘制圆角矩形的问题
请问各位前辈在canvas中使用这三句，
context.moveTo(110, 100);
context.arcTo(200, 100, 200, 200, 10);
context.lineTo(100, 200);
之后的显示效果为什么是
这样，而不是这样呢？
那个arcTo的第二个点的坐标怎么没有生效呢？
context.moveTo(110, 100);
context.arcTo(200, 100, 200, 200, 10);
context.lineTo(100, 200);
之后的显示效果为什么是
这样，而不是这样呢？
那个arcTo的第二个点的坐标怎么没有生效呢？
...全文
请发表友善的回复…
发表回复
neorobin 2015-08-13
arcTo 可以画出一段纯粹的弧, 也可以画出一段纯粹的直线, 还可以画出一段直线和一段弧(相切)的衔接组合, 所以 5 条线并不是必须的, 3 个 arcTo 就能实现了
neorobin 2015-08-13
楼主要的效果完全可以不用 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 2015-08-13
看看 W3C 的说明吧
http://www.w3.org/TR/2014/WD-2dcontext2-20140828/
下面几个图应该解释得很清楚了
http://www.w3.org/TR/2014/WD-2dcontext2-20140828/
下面几个图应该解释得很清楚了
天际的海浪 2015-08-13
请问代码第二行的context.arcTo(200, 100, 200, 200, 10);中的后两个200为何没有生效呢？[/quote]
http://www.jb51.net/html5/70318.html
_Slience_ 2015-08-13
请问代码第二行的context.arcTo(200, 100, 200, 200, 10);中的后两个200为何没有生效呢？
天际的海浪 2015-08-13
第二张图是三条直线和两条弧线，要五条线才能画出来，你三行代码当然画不出来