<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>canvas_demo</title>
<meta name="Keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<link href="http://demo.z01.com/dist/css/bootstrap4.min.css" rel="stylesheet"/>
<link href="http://demo.z01.com/dist/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://demo.z01.com/JS/jquery.min.js" ></script>
<script src="http://demo.z01.com/dist/js/popper.min.js"></script>
<script src="http://demo.z01.com/dist/js/bootstrap4.min.js"></script>
<script src="http://demo.z01.com/dist/js/trianglify.min.js"></script>
</head>
<body>
<style>
#my_canvas h1 {
position: absolute;
left: 20%;
bottom: 4rem;
font-size: 2rem;
font-weight: 100;
color: #fff;
z-index: 1;
}
#my_canvas {
position: relative;
height: 62vh;
overflow: hidden;
}
</style>
<div id="my_canvas">
<h1>canvas 文字测试</h1>
</div>
<script>
//智能背景画布
var pattern = Trianglify({
width: window.innerWidth,
height:1980,
x_colors: "PuOr"
});
var canvas = pattern.svg();
canvas.style.position = "absolute";
canvas.style.top = 0;
canvas.style.left = 0;
//canvas.style.height = 760;
document.getElementById("my_canvas").appendChild(canvas);
//主要依赖 http://demo.z01.com/dist/js/trianglify.min.js
//
//颜色列表
//Greens
//GnBu
//PuBuGn
//BuPu
//PuRd
//Reds
//PuOr
//BrBG
//PRGn
//PiYG
//RdBu
//RdGy
//RdYlBu
//Spectral
//RdYlGn
//
//
//
//
//
//
//
//
</script>
</body>
</html>
浙公网安备 33010602011771号
