在浏览 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. Spring框架xml配置中属性ref与value的区别

    1.spring批量扫描mybatis的mapper,使用value 2.spring管理mybatis的单个mapper,用的是ref 虽然引用的是同一个bean,但两个对象的属相类型明显不一样,一 ...

  2. python Request模块

    ---恢复内容开始--- Request的五种请求方式: request.get() request.post() request.head() requst.put() request.patch( ...

  3. Java堆和优先队列

    普通队列:先进先出,后进后出 优先队列:出队顺序和入队顺序无关,和优先级相关. 堆中某个节点的值总是不对于其父节点的值,最大堆. public class Array<E> { priva ...

  4. vs2017 EFCore 迁移数据库命令

    项目结构: 首先引用 Microsoft.EntityFrameworkCore.Tools Microsoft.EntityFrameworkCore.Design 增加类DesignTimeDbC ...

  5. mybatis 中使用 in 查询

    转:http://www.cnblogs.com/xusir/archive/2013/07/24/3210286.html 当查询的参数只有一个时 a 如果参数的类型是List, 则在使用时,col ...

  6. dbus-launch

    NAME dbus-launch - Utility to start a message bus from a shell script dbus-launch - 从shell脚本启动一个消息总线 ...

  7. Random Erasing Augmentation（REA）

    为了增强模型的泛化的性能,一般的手段有数据增强和正则化方法(如dropout,BN),而用于数据增强的一般方法有:随机裁剪.随机水平翻转.平移.旋转.增加噪音和生成网络方法等(前两个方法用的最多,也最 ...

  8. jquery只获取自身文本节点，不获取子元素的

    jQuery.text()方法时候,会把子元素的文本也获取到,以下方法可获取自身文本节点,不包括子元素 <div id="demo">只获取我<a href=&q ...

  9. BZOJ.4212.神牛的养成计划(Trie 可持久化Trie)

    BZOJ 为啥hzw的题也是权限题啊 考虑能够匹配\(s1\)这一前缀的串有哪些性质.对所有串排序,能发现可以匹配\(s1\)的是一段区间,可以建一棵\(Trie\)求出来,设为\([l,r]\). ...

  10. C++入门笔记（二）变量和基本类型

    变量和基本类型 一.基本内置类型 1.除去布尔类型和扩展的字符型外,其他整型可以分为带符号的和无符号的. 2.与其他整型不同,字符型被分为了三种:char.signed char 和 unsigned ...