リサージュ曲線(改) JavaScriptによって線画されたリサージュ曲線を表示してください。リサージュ曲線は、以下の関数で定義されています。tは媒介変数です。 let f = (a, b, t) => { let obj = {}; obj.x = Math.sin(a * t); obj.y = Math.sin(b * t); return obj; x、yには数字が動的に代入されます。よって、リアルタイムで徐々にリサージュ曲線が変化していきます。リサージュ曲線は、ゆっくりと線画されます。また、リサージュ曲線の色は様々な色に動的に変更されます。初めの色は赤色です。's game

Click here for free DL of the app version that can save data.

No:4669

4726

←

Prev Next

→

リサージュ曲線(改) JavaScriptによって線画されたリサージュ曲線を表示してください。 ..ALL
Developer もちきなこ｜Date and time 23/6/28 15:58:18
Build time 13.461 sec｜Game capacity 1.315KB｜

Script

以下は、リサージュ曲線を描画するJavaScriptのコードです。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

以下は、リサージュ曲線を描画するJavaScriptのコードです。

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  
  <script>
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    
    let a = 5;
    let b = 4;
    let t = 0;
    let color = "red";
    
    function draw() {
      let obj = calculatePoint(a, b, t);
      ctx.beginPath();
      ctx.strokeStyle = color;
      ctx.lineWidth = 3;
      ctx.moveTo(canvas.width / 2, canvas.height / 2);
      ctx.lineTo(canvas.width / 2 + obj.x * 100, canvas.height / 2 + obj.y * 100);
      ctx.stroke();
      
      t += 0.01;
      color = getNextColor(color);
      
      requestAnimationFrame(draw);
    }
    
    function calculatePoint(a, b, t) {
      let obj = {};
      obj.x = Math.sin(a * t);
      obj.y = Math.sin(b * t);
      return obj;
    }
    
    function getNextColor(currentColor) {
      let index = colors.indexOf(currentColor);
      if (index === colors.length - 1) {
        return colors[0];
      }
      return colors[index + 1];
    }
    
    const colors = ["red", "green", "blue", "yellow", "orange"];
    
    draw();
  </script>
</body>
</html>
```