js 动态生成背景图 GeoPattern

Posted ZjFree-自由自在

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 动态生成背景图 GeoPattern相关的知识，希望对你有一定的参考价值。

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

 

参考资料：

https://github.com/btmills/geopattern

http://btmills.github.io/geopattern/

以上是关于js 动态生成背景图 GeoPattern的主要内容，如果未能解决你的问题，请参考以下文章

炫酷 CSS 背景效果的 10 个代码片段

Android片段中的动态背景

一个动态小导航栏(好看的，用C3)（不依赖js，点击小图切换大的背景图）

morris.js 其js代码如下，该怎么动态的更改这些数据呢？

vscode代码片段生成vue模板

HTML5炫酷大气响应式Canvas银河星系动态背景图jquery插件代码