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

最新推荐文章于 2023-08-01 16:20:22 发布

_Slience_

最新推荐文章于 2023-08-01 16:20:22 发布

阅读量1.7w

点赞数

CC 4.0 BY-SA版权

分类专栏： html5-canvas

本文链接：https://blog.csdn.net/u010513756/article/details/47614201

html5-canvas 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了HTML5 Canvas API中使用arcTo方法绘制圆角矩形的技术细节。通过逐步解析绘制过程，揭示了如何利用arcTo方法实现平滑圆角效果的秘密。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

书中给的代码示例如下

<!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>

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

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