canvas制作旋转的五角星

最新推荐文章于 2022-12-29 14:19:31 发布

原创最新推荐文章于 2022-12-29 14:19:31 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何利用HTML5的canvas元素创建旋转的五角星效果，通过代码展示绘制过程，帮助读者理解canvas的基本操作和动画实现。

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

用canvas画以下图形：

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>旋转五角星</title>
	<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
	    var context = canvas.getContext("2d");
	    //设置边框样式以及填充颜色
	    context.lineWidth = 1;
	    context.fillStyle = "red";
	    context.strokeStyle = "red";

	    /* @length: 边长，逐渐变大
	     * @offset: 偏移位置，逐渐变大
	     * @offsetX: 横轴额外偏移，根据角度计算
	     * @offsetY: 竖轴额外偏移，根据角度计算
	     * @degree: 旋转角度，每次变化18度
	     */ 
	    var length = 2,
	    	offset = 8,
	    	degree = 0;
	    var halfWidth = canvas.width / 2,
	    	halfHeight = canvas.height / 2;
	    for (var num = 0; num < 60; num++) {
	    	length *= 1.05;
	    	offset *= 1.06;
	    	offsetX = offset * Math.cos(degree / 180 * Math.PI);
	    	offsetY = offset * Math.sin(degree / 180 * Math.PI)
	    	degree -= 18;

		    context.beginPath();
		    //设置是个顶点的坐标，根据顶点制定路径
		    for (var i = 0; i < 5; i++) {
		        context.lineTo(Math.cos((degree + i*  72) / 180 * Math.PI) * length + offsetX + halfWidth,
		                        -Math.sin((degree + i * 72) / 180 * Math.PI) * length + offsetY + halfHeight);
		        context.lineTo(Math.cos((degree + 36 + i * 72) / 180 * Math.PI) * length * 0.4 + offsetX  + halfWidth,
		                        -Math.sin((degree + 36 + i * 72) / 180 * Math.PI) * length * 0.4 + offsetY + halfHeight);
		    }
		    context.closePath();
		    context.fill();
		    context.stroke();
	    }
	</script>
</body>
</html>