js 动态生成背景图 GeoPattern

Posted on 2017-09-19 16:38 PHP-张工阅读(3249) 评论(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/

ZjFree-自由自在

公告

搜索

最新随笔

积分与排名

随笔分类 (385)

阅读排行榜

推荐排行榜

js 动态生成背景图 GeoPattern