canvas制作旋转的五角星

梦里梦外; 2022-07-15 08:36 206阅读 0赞

用canvas画以下图形：

![Center][]

代码如下：

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

[Center]: /images/20220715/8f6713025d1344668f4b37859989d1a0.png