博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

js 动态生成背景图 GeoPattern

Posted on 2017-09-19 16:38  PHP-张工  阅读(3229)  评论(0)  编辑  收藏  举报

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