变换色彩的旋转图形----背景效果

最新推荐文章于 2024-06-02 09:43:12 发布

青菜馒头

最新推荐文章于 2024-06-02 09:43:12 发布

阅读量750

点赞数

分类专栏：动画加载网页特效 javascript 文章标签： javascript html canvas 旋转星空背景特效

网页特效同时被 3 个专栏收录

17 篇文章

订阅专栏

动画加载

5 篇文章

订阅专栏

javascript

5 篇文章

订阅专栏

本文介绍了一种利用HTML5的Canvas元素结合JavaScript来创建动态视觉效果的方法。通过设置特定的数学公式，使得画布上的图形能够呈现出独特的动态变化，同时运用了渐变填充等高级特性增强视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

html代码：

<canvas id = 'canv'></canvas>

css代码：

body{
  width:100%; 
  overflow:hidden;
  margin:0;
}

js代码：

var c = document.getElementById('canv'),
  $ = c.getContext('2d'),
  w = c.width = window.innerWidth,
  h = c.height = window.innerHeight,
  t = 0,
  num = 550,
  u = 0,
  s, a, b,
  x, y, _x, _y,
  _t = 1 / 60;

var anim = function() {
  $.globalCompositeOperation = 'source-over';
  window.requestAnimationFrame(anim);
  $.fillStyle = 'hsla(0, 0%, 0%, .35)';
  $.fillRect(0, 0, w, h);
  $.globalCompositeOperation = 'lighter';
  for (var i = 0; i < 1; i++) {
    x = 0;
    $.beginPath();
    for (var j = 0; j < num; j++) {
      x += .45 * Math.sin(11);
      y = x * Math.sin(i + 3.0 * t + x / 15) / 15;
      _x = x * Math.cos(b) + y * Math.sin(i);
      _y = x * Math.sin(b) + y * Math.cos(i);
      b = (j * 2.66) * Math.PI / 4;
      $.lineWidth = 0.040;
      $.arc(w / 2 + _x, h / 2 + _y, 0.0, 0, 2 * Math.PI);
    }
    var g = $.createLinearGradient(w / 2 + _x, h / 2 + _y,
      1, w / 2 + _x, h / 2 + _y);
    g.addColorStop(0.1, 'hsla(' + (u + i) + ',95%,50%,1)');
    g.addColorStop(0.5, 'hsla(0,0%,10%,1)');
    g.addColorStop(1, 'hsla(0,0%,0%,1)');
    $.strokeStyle = g;
    $.stroke();
  }
  t += _t;
  u -= .2;
};
anim();

window.addEventListener('resize', function() {
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
}, false);