您的位置：首页 > 其它

【坑】【未解答】使用canvas中的arcTo绘制圆角矩形遇到的问题

2015-08-13 16:13 686 查看

书中给的代码示例如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1200" height="800"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
drawRoundRect(100, 100, 200, 200, 50);
function drawRoundRect(x, y, w, h, r) {
context.beginPath();

context.moveTo(x+r, y);
context.arcTo(x+w, y, x+w, y+h, r);
context.arcTo(x+w, y+h, x, y+h, r);
context.arcTo(x, y+h, x, y, r);
context.arcTo(x, y, x+r, y, r);

context.stroke();
}
</script>
</html>

我不明白为什么这样可以绘制出正确的圆角矩形

就以代码中的例子为例，它绘制的步骤我认为是这样的

绘制点移到(110,100)
之后绘制点移到(300, 100)，并以它为起点(300,300)为终点绘制一个弧线，此时绘制点移动到了(300, 300)
但是如果我就运行到第二步，之后直接lineTo到另一个位置，看看当前的绘制点到底是在哪的时候，发现绘制点(300, 110)的位置上，也就是说只是绘制了一个弧，下面的那个弧形没有绘制，但是完整的写下来又可以正常绘制一个圆角矩形

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航