続編。変更点は
・描画開始位置をランダムに
・線の太さをランダムに
・スタート、ストップ、リセット機能を追加 pic.twitter.com/f4lCrw9uLN
— らいと (@moshi1121) 2018年4月4日

訳があって、ゆるキャンΔOPのパロディ動画を作成することになりまして。OPチェックしていたところ、サビ前に富士山と星の軌跡が描かれている部分がありました。
これを作らなければいけないと考えたところ、めんどくさいなパラメータがみるみる上昇してきまして。
**だったら、JavaScriptでコード書いてCanvasに描いたほうがよくない！？**となったのがきっかけです。

rotation_stars.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>rotating_stars</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<div>
		<canvas id="canvas_area" width="1280" height="720"></canvas>
	</div>
	<input type="button" value="開始" onclick="drawStart();"/>
	<input type="button" value="停止" onclick="drawStop();"/>
	<input type="button" value="リセット" onclick="drawReset();"/>

	<style type="text/css">
		#canvas_area{
			background-color: #313CA3;
		}
	</style>
	<script>

		var c = $("#canvas_area")[0];
		var ctx = c.getContext("2d");

		var stars = [];
		var speed = 0.5;

		var CENTRAL_AXIS = { X:950, Y:230 }
		var MIN_RADIUS = 10;
		var MAX_RADIUS = 1100;
		var MIN_LINE_WIDTH = 0.1;
		var MAX_LINE_WIDTH = 2;

		function randRange(min, max){
			return Math.floor(Math.random() * (max - min + 1) + min);
		}

		function generateStar(){
			stars.length = 0;
			var Stars = function(){
				this.radius = randRange(MIN_RADIUS , MAX_RADIUS);
				this.lineWidth = randRange(MIN_LINE_WIDTH , MAX_LINE_WIDTH);
				this.startAngle = randRange(0, 360) * Math.PI / 180;
				this.endAngle = this.startAngle;
			}
			for(var i = 0; i < 300; i++){
				stars.push(new Stars());
			}
		}

		function drawStar(){
				$.each(stars, function( i, val){
					ctx.beginPath();
					ctx.arc(CENTRAL_AXIS.X , CENTRAL_AXIS.Y , val.radius, val.startAngle, val.endAngle, false);
					ctx.strokeStyle = "#C2E9FF";
					ctx.lineWidth = val.lineWidth;
					ctx.stroke();
					ctx.closePath();
					val.endAngle += speed * Math.PI / 180
				});
		}

		function draw(){
			ctx.clearRect(0,0,1280,720);
			drawStar();
		}

		function drawStart(){
				clearInterval(loop_draw);
				loop_draw = setInterval(draw, 10);
			}

		function drawStop(){
			clearInterval(loop_draw);
		}

		function drawReset(){
			drawStop()
			ctx.clearRect(0,0,1280,720);
			generateStar();
			x = 0;
		}

		generateStar();

		var loop_draw = setInterval(draw, 10);
	</script>
</body>
</html>