js 生成随机炫彩背景

Posted on 2017-09-21 15:16 PHP-张工阅读(1212) 评论(0) 编辑收藏举报

可以使用 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>

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

历史上的今天：
2012-09-21 C# 简易日志记录类

ZjFree-自由自在

公告

搜索

最新随笔

积分与排名

随笔分类 (385)

阅读排行榜

推荐排行榜

js 生成随机炫彩背景