在浏览 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. Java_面向对象

    目录 一.封装 二.继承 三.多态 四.重载与重写 五.接口与抽象类 六.继承与组合 七.初始化块 面向对象的三大特征:封装.继承.多态. 一.封装 是指将对象的状态信息都隐藏在对象内部,不允许外部程 ...

  2. CSS 屏幕大小自适应

    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法:  @medi ...

  3. Org mode无法生成LaTeX公式预览图片

    最近需要在Cygwin平台下的Emacs Org mode中生成LaTeX数学公式的预览图片,从而得到图文并貌的笔记与任务管理文档.但当我执行org-toggle-latex-fragment命令后却 ...

  4. vue-router 去掉#

    vue-router默认的路由模式是hash,我们要去掉url中的#需要将路由模式切换为history const router = new VueRouter({ mode: 'history', ...

  5. sqlserver给用户配置存储过程查看权限

    对应的数据库->安全性->用户名右键属性-->安全对象-->指定所有对象-->选择服务器,里边有一个 查看定义(view any definition) 选项,勾上.

  6. vs2017更新出错：The entire Box execution exiting with result code: 0x0

    在将vs2017 15.7.4更新至15.9.5出现“The entire Box execution exiting with result code: 0x0”错误,也就是文件解压下载开始安装后, ...

  7. python正则表达式判断素数【厉害了】

    参考: https://www.cnblogs.com/imjustice/p/check_prime_by_using_regular_expression.html for i in range( ...

  8. angular之指令

    指令(Directive) 1.指令概念介绍 --  AngularJS有一套完整的.可扩展的.用来帮助web应用开发的指令集. --  在DOM编译期间和HTML关联着的指令会被检测到,并且 会被执 ...

  9. ELK:logstash和filebeat6.0及以上版本的配置

    filebeat6.0版本以上没有document_type字段,因此需要另外标记下或者代替document_type字段的功能 案例如下: fielbeat5.5的配置 logstash5.5的配置 ...

  10. Centos7使用kubeadm部署kubernetes-1.11.2

    1.安装方式 1.  传统方式,以下组件全部运行在系统层面(yum或者rpm包),都为系统级守护进程 2.  kubeadm方式,master和node上的组件全部运行为pod容器,k8s也为pod ...