随机背景图案效果
代码语言:html
所属分类:背景
代码描述:通过正方形圆形五角星等效果实现背景布局效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background: #333;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body translate="no">
<script>
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;} // CodePen Challenge
// Generative Patterns
//
// 1 Create a grid with random points
// 2 if those points are large enough check quad family
// 3 branch in up to 4 directions
// 4 do stuff and check again
//
// Click to change
// Parent Render Class
class Render {
constructor() {_defineProperty(this, "setViewport",
element => {
const canvasElement = element;
const dc = document.documentElement;
this.width = ~~(dc.clientWidth, window.innerWidth || 0);
this.height = ~~(dc.clientHeight, window.innerHeight || 0);
canvasElement.width = this.width;
canvasElement.height = this.height;
});_defineProperty(this, "createCanvas",
name => {
const canvasElement = document.createElement('canvas');
canvasElement.id = name;
this.setV.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0