100% 使用 Javascript 滚动 Y 画布答案

【问题标题】：100% Scrolling Y Canvas using Javascript100% 使用 Javascript 滚动 Y 画布
【发布时间】：2021-05-19 06:38:25
【问题描述】：

我每 3 年使用一次 JS，我很惊讶尽管存在差距，但它仍然变得更容易理解。

我想要一个随机的、模糊的点背景用于我的 wordpress。我设法使用此处的其他帖子将this 拉到一起。完全按照我想要的方式工作。

现在，为了将其作为我的 Wordpress 主题背景，我将其称为画布。

Javascript

var c = document.createElement('canvas'),
  document.createElement('canvas').style.position = "relative",
  document.createElement('canvas').style.zIndex = "2",
    context = c.getContext('2d');


window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
            c.width = window.innerWidth;
            c.height = document.body.scrollHeight;
      
      
            /**
             * Circles.
             */
            drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
// dot count
const dots = 7;
// max distance from the center
const radius = 2000;


var createDots = function () {
    for (var i = 0; i <= dots; i++) {
        context.beginPath();
        const dist = (Math.random()) * radius;
        var rand_x = radius * Math.random();
        var rand_y = radius * Math.random();
        context.arc(rand_x, rand_y, 90, 0, 2 * Math.PI);
        context.fillStyle = "#ed194f";
        //context.filter = "blur(180px)";
        context.shadowBlur = 160;
        context.fill();
        context.closePath();
    }
}

createDots();    }


document.body.style.background = 'url(' + c.toDataURL() + ')';

（可能没用）CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block;
width: 100%;
    height: 100%;} /* To remove the scrollbars */

我有几个问题：

Y 应该滚动。它目前仅限于视口的高度并重复。
它不像小提琴那样随机。这些点往往大致保持在一条线上。
我为 Safari 切换到 shadowBlur，但仍然没有模糊。

里面可能有一些无关的东西——如果是这样，请告诉我，因为我非常渴望学习。 This 是网站（您必须关闭.jupiterx-main 的#fff bg 才能看到它的运行情况——还有另一项工作正在进行中）。任何帮助表示赞赏！

【问题讨论】：

我刚刚回答了我自己的#3。 shadowBlur 需要定义 shadowColor。

标签： javascript css wordpress

【解决方案1】：

看了足够长的时间，能够回答#3。 shadowBlur 需要定义 shadowColor。

context.fillStyle = 'rgba(255, 255, 255, 0.1)'; context.fill(); context.shadowColor = '#F03C69'; context.shadowBlur = 40;

不幸的是，这会产生最微弱（但仍然很明显）的圆圈。它没有达到我从context.filter = "blur(180px)"; 寻找的那种夸张的外观

Here 是。

【讨论】：