js 動態生成背景圖 GeoPattern

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

以前有個想法，能不能用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>

參考資料：

js 動態生成背景圖 GeoPattern

以前有個想法，能不能用JS動態建立CANVAS繪製圖案當網頁背景，在網路發現有現成的別人已經實現的：GeoPattern 程式碼如下： <!DOCTYPE html> <html> <head> <title>js 生成隨機背景圖<

2017-05-17 js動態生成輪播圖小圓點

輪播圖鼠標 borde images author eight 復習 innerhtml pad 從今天開始，把自己做的筆記轉移到博客園：今晚復習了一下動態創建輪播圖小圓點做了一下小的筆記： 1 <!DOCTYPE html> 2 <html l

Js--動態生成表格

aaaaa tel 一個 click inpu document NPU UNC b+ <div> <h1>動態生成表格</h1> <div id="table1"> 行：&l

初學js---動態生成表格

tle innerhtml rip ont link -s oct ref 操作動態生成表格並封裝函數： 1.動態創建表頭　　*通過createElement(‘table‘)創建一個表格標簽——>通過createElement(‘thead‘)創建表頭——&g

js動態生成表格

htm round get test rem words contex .com cli 下面用js實現可以生成用戶所需行數的表格。 1.首先在body中填入下列代碼，獲取用戶填入的行數值 1 <table> 2 <tr> 3

scrapy利用scrapy-splash爬取JS動態生成的標籤

1 引言 scrapy處理爬取靜態頁面，可以說是很好的工具，但是隨著技術的發展，現在很多頁面都不再是靜態頁面了，都是通過AJAX非同步載入資料動態生成的，我們如何去解決問題呢？今天給大家介紹一種方法：scrapy-splash 2 準備工作首先需要安裝一下幾個工具（1）

爬取JS動態生成的URL

愛卡汽車論壇搜尋結果頁面：想要python爬取搜尋結果連結：a標籤中的href，但是這個url是動態生成的。網頁原始碼：用普通方式解析： import urllib.request url = "http://search.xcar.com.cn/metasea

[Jsoup] 使用HtmlUnit + Jsoup解析js動態生成的網頁

在使用Jsoup過程中會遇到無法解析通過javascript動態生成的html網頁, 在Jsoup交流群中也經常會有人問到這個問題, 本文的解決辦法是使用HtmlUnit+Jsoup來解析動態dynamic網頁. 一般會出現動態js載入的網頁原始碼為, 某些關鍵性資料,

js動態生成二維碼

1、首先在頁面中加入jquery庫檔案和qrcode外掛 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src=

js動態生成的標籤，點選傳遞引數到js函式

在js函式中，動態生成了一系列<a>標籤，現在需要點選a標籤後，能夠傳值到點選後呼叫的函式，，嘗試了好久才成功！ for(var i=0;i<len;i++){ var tr=oTbody.insertRow(i);

js動態生成按鈕的響應

動態新增按鈕：function_name: function (data) { var self = this; var info = null; $(".s

JS動態生成函式

在上面的形式中，每個 arg 都是一個引數，最後一個引數是函式主體（要執行的程式碼）。這些引數必須是字串。大多數情況下，這都可以被一般的傳參式建立所替代，但是有些特別的情況只能使用上述方式建立。例：現在有變數 var tpl = "Hello ' + obj.username +'.'

js動態生成form表單並提交

在提交json資料時，可能會出後臺無法解析資料的bug，碰到這個不要怕，在提交資料前用js轉一下json就好了，下面我寫的程式碼裡有轉json的程式碼，如果只是傳單個數據，就沒必要寫成json格式了。 $("#exceldown").click(function() {

js動態生成勾選框，可單選可多選

1、動態生成的位置，html程式碼： <body> <div class="show" id="show"> </div> </body> 2、這是ajax()的一部分，從資料庫取得所需的資料succes

解決nginx利用image_filter動態生成縮圖不支援bmp

location ~* /(.+)_(\d+)x(\d+)\.(jpg|gif|png|bmp)$ { set $h $2; set $w $3; if ($h = "0") { rewrite /(.

js動態生成的dom無法啟動事件（click，mouseover......）

解決辦法：1.將執行事件的程式碼放在生成dom的 function 裡面 $.ajax({ url: "url", //json檔案位置 // url: "serialization.json", //json檔案位置

JS動態生成的元素，其對應的方法不響應（比如單擊事件，滑鼠移動事件等）

主要原因：在頁面給元素註冊點選事件的時候【 $(function () { XXX }); 】，JS動態生成的元素還尚未生成，所以click事件就沒有生效解決方法：方案一：js動態生成元素後再給其註冊事件【註冊事件放在動態生成的js下面（js是從上往下執行的，當註冊事件的時候元素已經生成了

用js動態生成css樣式表

有時候我們需要利用js來動態生成頁面上style標籤中的css程式碼，方法很直接，就是直接建立一個style元素，然後設定style元素裡面的css程式碼，最後把它插入到head元素中。但有些相容性問題我們需要解決。首先在符合w3c標準的瀏覽器中我們只需要把要插入的css程式碼作為一個文字節點插入到

js動態生成表格【含合併單元格的表格】

最近遇到需求，動態生成表格，類似Excel，支援合併單元格的表格，程式碼分享給大家~ 一、網上找到的簡單生成表格的例子：以下是生成規則表格m行*n列類似，可以直接開啟HTML檢視結果。 <!DOCTYPE html> <html l

js 動態生成html 觸發事件傳參字元轉義

通常，在使用 JS 動態生成 html 的過程中，會嵌入相應的樣式、事件等屬性元素，而這時經常會出現所謂的 “單、雙引號不夠用” 的情況，別急，這時可以利用 html 語言中的轉義字元來解決。下面就來介紹一下相應的轉義字元吧： & —— (ampersand) 轉義字元對應為 &am

js 動態生成背景圖 GeoPattern

相關推薦