js 动态生成背景图 GeoPattern

本文转载自查看原文 2017-09-19 16:38 1576 工具

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Unity3D NGUI动态生成模糊背景图带动态背景图的二维码生成器 vue动态绑定图片和背景图 react 动态添加设置背景图和className vue 动态设置背景图，并撑满容器求背景图 html背景图 WPF背景图 python生成词云（可更换背景图） JS实现背景图按时切换或者每次更新