Canvas线条花环

原创

她与丈母娘皆失 2022-08-23 10:56:37 博主文章分类：JS ©著作权

文章标签 canvas js 动画简单动画迷人动画 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者她与丈母娘皆失的原创作品，请联系作者获取转载授权，否则将追究法律责任

可喜可贺！庆祝电脑起死回生，庆祝一天好过一天。深夜给电脑安装了开发插件，第二天莫名死机，问了好多人都说主板坏掉了，需要重装系统。我先是对着宾夕法尼亚大学的方向拜了拜，又是一番操作，终于唤醒了老伙计度假的心。
写一个Canvas 动画送给你们，十五的月亮十六圆，多给家人一些陪伴。

Canvas线条花环_动画

Canvas线条花环_简单动画_02

今晚我会出一期Canvas 动画详细教程，如果你欣赏我的动画，可以添加收藏，请查看我的置顶文章，我将不胜感激。

请看源码：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Canvas 网状花环</title>
<style>html, body {
  margin: 0;
  overflow: hidden;
}</style>
</head>
<body>
  <canvas id="canvas" width="100%" height="100%">
</body>
<script>var canvas = document.querySelector("#canvas");
  var ctx = canvas.getContext("2d");
  var mouseX = 0;
  var mouseY = 0;
  var a = 0.2;
  var t = 0;
  var aStep = Math.PI * 0.01;
  var globalHue = 0;
  init();
  function init() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    window.addEventListener("mousemove", e => {
      mouseX = e.clientX;
      mouseY = e.clientY;
    });
    update();
  }

  function update() {
    requestAnimationFrame(update);
    var time = performance.now() / 60;

    // do stuff here
    a = Math.sin(2 - time * 0.0001);
    t = Math.sin(2 + time * 0.03);
    //aStep = (Math.sin(time * 0.01) + 1.5) * 0.25
    aStep = Math.PI * (0.375 + Math.sin(time * 0.001) * 0.125);

    globalHue += 10;

    draw();
  }

  function draw() {
    // clear canvas
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // line
    var cx = window.innerWidth / 2;
    var cy = window.innerHeight / 2;
    var x, y, px, py;
    var radius = 0,pradius = 0;
    var totalAngle = Math.PI * 200;
    for (var theta = 0; theta < totalAngle; theta += aStep) {
      pradius = radius;
      radius = (t + Math.pow(2, Math.cos(theta * a))) * 200;
      px = x;
      py = y;
      x = cx + Math.cos(theta) * radius;
      y = cy + Math.sin(theta) * radius;

      if (theta > 0) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(px, py);

        var dx = x - px;
        var dy = y - py;
        var lineSize = Math.sqrt(dx * dx + dy * dy);

        var r = pradius + (radius - pradius) / 2;

        var hue = globalHue + theta / Math.PI * 180;
        ctx.strokeStyle = "hsl(" + hue + ", 100%, 50%)";
        //ctx.lineWidth=clamp(map(r, -200, 200, 0.25, 2), 0.25, 10);
        ctx.lineWidth = .5;
        ctx.stroke();
        ctx.closePath();
      }
    }
  }
  function map(value, start1, stop1, start2, stop2) {
    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
  }
  function clamp(value, min, max) {
    return value < min ? min : value > max ? max : value;
  }</script>
</html>