在浏览 https://ghost.org/xxxx/ 时。

可以使用 background-size: cover; 加上很小的像素图，放大后实现炫彩背景效果。

使用 js canvas 随机生成小的像素图，设置为背景图。来实现随机背景效果

代码如下：

<!--参考资料：https://ghost.org/xxxx/-->

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="renderer" content="webkit">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>随机炫彩背景</title>

<style>

/* css style */

html, body{margin:0; padding:0; min-height:100%;}

body {

    background-size: cover;

    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAADCAYAAABfwxXFAAAAYklEQVQIWwFXAKj/ARBhmP8R6wMAHhsgABLvBAByKg0AterTAP7W8wABGnGg/1InOABMECEAy4vRAEcMAADE98oA4PjqAAEgYIL/MDs3AEcGLADxieMAQhUWAO/xzwCh778ANjsgSPo2oIsAAAAASUVORK5CYII=");

}

</style>

</head>

<body>

<h1 style="text-align:center; color:#fff;">随机炫彩背景</h1>

<script>

// 生产随机数

// rand(10); 10

// rand([10, 100]); 10 ~ 100

// rand([50]); 0 ~ 50;

// rand([10,20,30]); 10|20|30

function rand(arr)

{

    if (typeof arr === 'number')

    {

        return arr;

    }

    var v = 0;

    if (arr.length == 1)

    {

        v = Math.round(Math.random() * arr[0]);

    }

    else if (arr.length == 2)

    {

        var a = arr[0];

        var b = arr[1];

        v = Math.round(a + Math.random() * (b - a));

    }

    else if (arr.length > 2)

    {

        v = arr[Math.round(Math.random() * (arr.length - 1))];

    }

    return v;

}

// h 色调 s 饱和度 l 亮度

function randColorHsl(h, s, l)

{

    h = h||[0, 360];

    s = s||50;

    l = l||50;

    return "hsl(" + rand(h) + ", " + rand(s) + "%, " + rand(l) + "%)";

}

function randColorRgb(r, g, b)

{

    r = r||[0, 255];

    g = g||[0, 255];

    b = b||[0, 255];

    return "rgb(" + rand(r) + ", " + rand(g) + ", " + rand(b) + ")";

}

var canvas = document.createElement('canvas');

// 像素大小控制图形复杂度

canvas.width = 7;

canvas.height = 3;

var ctx=canvas.getContext('2d');

function randBackground()

{

    for (var x=0; x<canvas.width; x++)

    {

        for (var y=0; y<canvas.height; y++)

        {

            // 随机颜色

            // ctx.fillStyle = randColorHsl();

            // ctx.fillStyle = randColorRgb();

            ctx.fillStyle = randColorHsl(250, 50, [50, 80]);

            ctx.fillRect(x,y,x+1,y+1);

        }

    }

    // 设置背景图

    document.body.style.backgroundImage = 'url("' + canvas.toDataURL() + '")';

}

window.setInterval(randBackground, 3000);

</script>

</body>

js 生成随机炫彩背景的更多相关文章

  1. js生成随机固定长度字符串的简便方法

    概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 ...

  2. JS生成随机字符串的多种方法

    这篇文章主要介绍了JS生成随机字符串的方法,需要的朋友可以参考下 下面的一段代码,整理电脑时,记录备查. <script language="javascript"> ...

  3. MOCK.JS 生成随机数据，拦截 Ajax 请求

    mock.js 的用处 前后端分离 :让前端攻城师独立于后端进行开发. 增加单元测试的真实性 :通过随机数据,模拟各种场景. 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响 ...

  4. JS生成随机的由字母数字组合的字符串

    前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇妙的写法   1 Math.random().toString(36).substr( ...

  5. js生成随机字符串或者随机数

    //返回一个指定范围内的随机数 function createRandomNum(Min,Max){ let Range = Max - Min; let Rand = Math.random(); ...

  6. 【分享】JS生成随机字符串

    之前忘了从哪里找到的一段代码,整理电脑时,记录为博文备查,原创不是我. function randomString(len) { len = len || 32; var $chars = 'ABCD ...

  7. JS 生成随机字符串 随机颜色

    使用Math.random()生成随机数 0.7489584611780002数字的.toString(n) 将数字转换为 n 进制的字符串 n取值范围(0~36)"0.vbpjw8lipf ...

  8. JS生成随机字符串

    function randomString(len) { len = len || 32; var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxy ...

  9. 4月6日--js生成随机数列

    newarr=[1,2,3,4,5,6] function randomsort(a,b){ return Math.random()>0.5?-1:1;}//用Math.random()函数生 ...

随机推荐

  1. python实现常见排序算法

    #coding=utf-8from collections import deque #冒泡排序def bubblesort(l):#复杂度平均O(n*2) 最优O(n) 最坏O(n*2) for i ...

  2. .net基础学java系列（六）Java基础

    一.废话 .net学java为何一直没入坑?其实大家都知道,语法很相似,就是使用的习惯不同 稍微的语法差异 结构体系不同 IDE不同 类库集不同 各种框架不同 对于我来说,我一直被第三道坎拦住了,所以 ...

  3. LOJ#6374 网格

    题解: 挺好的一道题 两次容斥+一次二项式反演 首先考虑部分分不存在k的限制 然后我们发现两维之间是互相独立的 下面以x轴为例 然后问题就变成了 $$\sum\limits_{i=1}^{R} {xi ...

  4. __builtin_expect — 分支预测优化

    1.引言 在很多源码如Linux内核.Glib等,我们都能看到likely()和unlikely()这两个宏,通常这两个宏定义是下面这样的形式. #define likely(x) __builtin ...

  5. 如何在.Net Core调用NodeJs

    概述 Microsoft.AspNetCore.NodeServices库 实例 新建aspnet core站点 添加nuget包 建立node环境,此处示例用于扫描wifi环境 建立nodejs的程 ...

  6. 安卓获取签名SHA1

    Debug签名:D:\Java\jdk1.8.0_151\bin>keytool -list -v -keystore debug.keystore  无需密码 Relese签名:D:\Java ...

  7. 2018-2019-2 网络对抗技术 20165319 Exp3 免杀原理与实践

    免杀原理及基础问题回答 免杀原理: 免杀指的是一种能使病毒木马免于被杀毒软件查杀的技术.由于免杀技术的涉猎面非常广,其中包含反汇编.逆向工程.系统漏洞等黑客技术,所以难度很高,一般人不会或没能力接触这 ...

  8. Picnic Planning POJ - 1639（最小k度生成树）

    The Contortion Brothers are a famous set of circus clowns, known worldwide for their incredible abil ...

  9. 动态DP之全局平衡二叉树

    目录 前置知识 全局平衡二叉树 大致介绍 建图过程 修改过程 询问过程 时间复杂度的证明 板题 前置知识 在学习如何使用全局平衡二叉树之前,你首先要知道如何使用树链剖分解决动态DP问题.这里仅做一个简 ...

  10. ajax 文件下载

    作为一个后端开发人员,使用java 生成文件,提供前端下载,这个问题倒不大,可是让我们自己去下载文件的时候,这个问题就大了,对不起,我只对前端一知半解,并不精通,谢谢!! 需求如下:前端检索数据,后台 ...