Gavin0x0 · March 17, 2023 05:49
diff --git a/wave.js b/wave.js
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8" />
    <title>5交错着绕X轴旋转的正弦波曲线</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .canvas-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        perspective: 1000px;
        display: flex;
      }

      canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        animation: rotate 2s linear infinite;
        transform-origin: center;
      }

      @keyframes rotate {
        0% {
          transform:  rotateX(0deg);
        }
        100% {
          transform:  rotateX(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="canvas-container"></div>

    <script>
      const container = document.querySelector(".canvas-container");
      const canvases = [];
      const ctxs = [];
      const angles = [0, 45, 90, 135, 180];
      let angleStep = 0; // 初始旋转角度

      // 创建5个canvas，并将它们添加到container中
      for (let i = 0; i < 5; i++) {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.style.animationDelay = `${i * 0.3}s`;

        container.appendChild(canvas);
        canvases.push(canvas);
        ctxs.push(ctx);
      }

      // 计算正弦曲线的属性
      const amplitude = canvases[0].height / 20; // 振幅
      const frequency = 0.01; // 频率
      const step = 5; // 每个数据点之间的间隔

      for (let i = 0; i < 5; i++) {
        const canvas = canvases[i];
        const ctx = ctxs[i];
        const center = canvas.height / 2 + amplitude;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.moveTo(0, center);
        for (let j = 0; j < canvas.width; j += step) {
          const y = center-80+
            amplitude * Math.sin(frequency * j + (angles[i] * Math.PI) / 180);
          ctx.lineTo(j, y);
        }
        /// 半透明淡蓝色
        ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
        ctx.lineWidth = 5;
        ctx.stroke();
      }
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>5交错着绕X轴旋转的正弦波曲线</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	.canvas-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	perspective: 1000px;
	display: flex;
	}

	canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	animation: rotate 2s linear infinite;
	transform-origin: center;
	}

	@keyframes rotate {
	0% {
	transform: rotateX(0deg);
	}
	100% {
	transform: rotateX(360deg);
	}
	}
	</style>
	</head>
	<body>
	<div class="canvas-container"></div>

	<script>
	const container = document.querySelector(".canvas-container");
	const canvases = [];
	const ctxs = [];
	const angles = [0, 45, 90, 135, 180];
	let angleStep = 0; // 初始旋转角度

	// 创建5个canvas，并将它们添加到container中
	for (let i = 0; i < 5; i++) {
	const canvas = document.createElement("canvas");
	const ctx = canvas.getContext("2d");

	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	canvas.style.animationDelay = `${i * 0.3}s`;

	container.appendChild(canvas);
	canvases.push(canvas);
	ctxs.push(ctx);
	}

	// 计算正弦曲线的属性
	const amplitude = canvases[0].height / 20; // 振幅
	const frequency = 0.01; // 频率
	const step = 5; // 每个数据点之间的间隔

	for (let i = 0; i < 5; i++) {
	const canvas = canvases[i];
	const ctx = ctxs[i];
	const center = canvas.height / 2 + amplitude;

	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.beginPath();
	ctx.moveTo(0, center);
	for (let j = 0; j < canvas.width; j += step) {
	const y = center-80+
	amplitude * Math.sin(frequency * j + (angles[i] * Math.PI) / 180);
	ctx.lineTo(j, y);
	}
	/// 半透明淡蓝色
	ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
	ctx.lineWidth = 5;
	ctx.stroke();
	}
	</script>
	</body>
	</html>