以前有個想法，能不能用JS動態創建CANVAS繪制圖案當網頁背景，在網絡發現有現成的別人已經實現的：GeoPattern
代碼如下：
<!DOCTYPE html> <html> <head> <title>js 生成隨機背景圖</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script> <style> html, body{ margin:0; padding:0; width:100%; height:100%; } </style> </head> <body> <script> $(function(){ var option = { //color:'#060', // 前景色 //baseColor:'#006', // 背景色 //generator:'plusSigns', // 樣式 }; var pattern = GeoPattern.generate('GitHub' + Math.random(), option); $('body').css('background-image', pattern.toDataUrl()); }); </script> </body> </html>
參考資料：