Neon. displays a beautiful effect. The effect is neon illumination. It is drawn by JavaScript canvas.'s game

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

No:7603

1881

←

Prev Next

→

Neon. displays a beautiful effect. The effect is n..ALL
Developer もちきなこ｜Date and time 23/7/8 23:50:26
Build time 6.669 sec｜Game capacity 1.248KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Neon</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="neonCanvas"></canvas>

const gradient = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, 10, canvas.width / 2, canvas.height / 2, canvas.width / 2);
    gradient.addColorStop(0, '#ffffff');
    gradient.addColorStop(1, '#00ff00');

ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      const radius = (canvas.width > canvas.height) ? canvas.height / 2 : canvas.width / 2;
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
      ctx.strokeStyle = '#00ff00';
      ctx.lineWidth = 5;
      ctx.stroke();
      
      requestAnimationFrame(animate);
    }

animate();
  </script>
</body>
</html>