js 生成隨機炫彩背景

阿新 • • 發佈：2019-01-17

可以使用 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 生成隨機炫彩背景

可以使用 background-size: cover; 加上很小的畫素圖，放大後實現炫彩背景效果。使用 js canvas 隨機生成小的畫素圖，設定為背景圖。來實現隨機背景效果程式碼如下：  <!

js生成隨機編碼並賦值給input文本框

查看技術根據 1-1 javascrip clas times product pro 　　　效果圖如下：　　　　　　　　　　　　　　　　　　　　　頁面代碼：　　　　<div class="form-item form-width-in fr">

js生成隨機固定長度字符串的簡便方法

func tostring %u nco ring nds 方法並且也有概述碰到一個需求：用js生成固定長度的字符串。在網上查了很多資料，網上的方法都比較麻煩。我自己靈光一現，實現了一個比較簡單的方法。記錄下來，供以後開發時參考，相信對其他人也有用。 js生成隨機字

JS生成隨機整數

用JS的隨機數生成函式random()配合其他數學函式可以限制隨機數的取值。 JS的隨機數函式及相關函式： Math.random(); 結果為0-1間的一個隨機數(包括0,不包括1) 。 Math.floor(num); 引數num為一個數值，函式結

JS生成隨機的由字母數字組合的字串

前言最近有個需求，是需要生成3-32位長度的字母數字組合的隨機字串，另一個是生成43位隨機字串。方法一奇妙的寫法 1 Math.random().toString(36).substr(2); 輸

js 生成隨機陣列或者叫做洗牌演算法

我們假設有一個顏色陣列是這樣的 var arr = ["red", "green", "blue", "yellow", "brown", "violet"]。如果將其順序打亂，生成一個隨機的陣列。這該如何做呢？ 1.一種直觀的做法就是，隨機生成一個[0, arr.leb

js 生成隨機數字（1-9）數字鍵盤

使用Mock.js生成隨機JSON資料

1 首先，我們需要在程式碼檔案中安裝mock模組，所以，我們開啟程式碼檔案的根目錄，然後在此處啟動命令列工具。 2 依次輸入以下兩條命令，完成mock模組的安裝。此處要注意的是，安

js生成隨機碼(只含有數字和字母的隨機碼)

生成 and pos ++ 最小 lag 組合固定 return /*** randomWord 產生任意長度隨機字母數字組合** randomFlag 是否任意長度 min 任意長度最小位[固定位數] max 任意長度最大位*/ function randomWord(

js生成隨機不重複ID

function createRandomId() { return (Math.random()*10000000).toString(16).substr(0,4)+'-'+(new Date()).getTime()+'-'+Math.rand

Mock.js生成隨機資料，攔截 Ajax 請求，讓前端獨立於後端進行開發

- 什麼是Mockjs Mockjs是個能夠攔截頁面ajax請求並模擬返回資料的小工具，藉助Mockjs，前端開發中在後臺測試介面還沒有給的時候就可以自己攔截請求模擬資料進行愉快的開發了，所

js生成隨機字串（數字，字母，特殊字元）

方法 /* ** randomWord 產生任意長度隨機字母數字組合 ** randomFlag 是否任意長度 min 任意長度最小位[固定位數] max 任意長度最大位 ** yuejingge 2

h5+js生成隨機大小的雪花

雙旦即將來臨，來點雪花為即將到來的節日新增點色彩吧！初學者，不喜勿噴利用H5中的canvas+js製作出簡單的雪花降落的動態效果！ html程式碼如下：<!DOCTYPE html> <html lang="en"> <head>

js生成隨機字串

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js生成隨機數</title> <script

JS生成指定位數的隨機

可能過程 con 次方 blog dom and 定位問題： <html><script> //獲取指定位數的隨機數 function getRandom(num){ var random = Math.floor((Math.

（漂浮？氣泡？）js生成位置、顏色、透明度隨機的字塊

utf-8 協議分析 round max-width query images random 效果圖 rand 效果圖如下：代碼： <!DOCTYPE html> <html lang="en"> <head>

超多經典 canvas 實例，動態離子背景、移動炫彩小球、貪吃蛇、坦克大戰、是男人就下100層、心形文字等等等

ntb contex lin 如果 maxwidth sel 容器操作 reat 超多經典 canvas 實例普及：<canvas> 元素用於在網頁上繪制圖形。這是一個圖形容器，您可以控制其每一像素，必須使用腳本來繪制圖形。註意：IE 8 以及更早的版本不

JS基礎篇--通過JS生成由字母與數字組合的隨機字符串

pos acc 進一步怎樣 index ring 擴展 mat floor 在項目中可能需要隨機生成字母數字組成的字符，如生成3-32位長度的字母數字組合的隨機字符串（位數不固定）或者生成43位隨機字符串（位數固定）使用Math.random()與toString()

@description iPhoneX炫彩漸變背景實現

1.3 return texture nim tar path iphone undefine orf /** * @author zhangxinxu(.com) * @description iPhoneX炫彩漸變背景實現 * @link http://

JS 生成永不重複的隨機序列號

序列號由大小寫字母 + 數字組成，直接上程式碼： function getRandomCode(length) { if (length > 0) { var data = ["0", "1", "2", "3", "4", "5", "6", "7",

js 生成隨機炫彩背景

相關推薦