canvas画布变换画六芒星-优快云博客

本文链接：https://blog.youkuaiyun.com/sysuzjz/article/details/53108028

本文介绍如何利用HTML5 canvas的画布变换技巧来绘制出精美的六芒星，详细解析代码实现过程。

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

要求使用canvas的画布变换方法。

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>六芒星</title>
	<meta charset="utf-8">
</head>
<body>
	<canvas id="canvas" width="220" height="220"></canvas>

	<script type="text/javascript">
		var canvas = document.querySelector('#canvas'),
			context = canvas.getContext('2d');

		var width = canvas.width,
			height = canvas.height;

		// 原点坐标
		var originX = width / 2,
			originY = height / 2,
			radius = 100;

		context.lineWidth = 1;

		// 画外圈
		context.strokeStyle = '#000';
		context.beginPath();
		context.arc(originX, originY, radius, 0, 2 * Math.PI);
		context.stroke();
		context.closePath();

		context.beginPath();
		context.arc(originX, originY, radius + 10, 0, 2 * Math.PI);
		context.stroke();
		context.closePath();

		// 把原点移动到圆心，旋转之后才不会变形
		context.translate(originX, originY)
		for (var i = 0; i < 6; i++) {
			// 画完三角形后旋转一半角度画另一个三角形
			if (i === 3) {
				context.rotate(Math.PI * 2 / 6);
			}
			context.moveTo(0, -radius);
			context.lineTo(radius * Math.sin(Math.PI / 3), radius / 2);
			context.stroke();
			context.rotate(Math.PI * 2 / 3);
		}
	</script>
</body>
</html>