<!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({ 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>