• 全部
  • 问答

html5中绘制圆角矩形的问题

_Slience_ 2015-08-13 03:56:46
请问各位前辈在canvas中使用这三句,
context.moveTo(110, 100);
context.arcTo(200, 100, 200, 200, 10);
context.lineTo(100, 200);
之后的显示效果为什么是
这样,而不是这样呢?
那个arcTo的第二个点的坐标怎么没有生效呢?
...全文
1112 点赞 收藏 6
写回复
6 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
neorobin 2015-08-13
引用 1 楼 jslang 的回复:
第二张图是三条直线和两条弧线,要五条线才能画出来,你三行代码当然画不出来
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/

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


回复
天际的海浪 2015-08-13
引用 2 楼 u010513756 的回复:
[quote=引用 1 楼 jslang 的回复:] 第二张图是三条直线和两条弧线,要五条线才能画出来,你三行代码当然画不出来
请问代码第二行的context.arcTo(200, 100, 200, 200, 10);中的后两个200为何没有生效呢?[/quote] http://www.jb51.net/html5/70318.html
回复
_Slience_ 2015-08-13
引用 1 楼 jslang 的回复:
第二张图是三条直线和两条弧线,要五条线才能画出来,你三行代码当然画不出来
请问代码第二行的context.arcTo(200, 100, 200, 200, 10);中的后两个200为何没有生效呢?
回复
天际的海浪 2015-08-13
第二张图是三条直线和两条弧线,要五条线才能画出来,你三行代码当然画不出来
回复
相关推荐
发帖
HTML5
创建于2012-11-23

3.8w+

社区成员

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
申请成为版主
帖子事件
创建了帖子
2015-08-13 03:56
社区公告
暂无公告