canvas实现聚烯烃动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现聚烯烃动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
background-color: #ffe;
margin:0;
padding:0;
border-width:0;
overflow:hidden;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
div {
position: absolute;
top: 0;
left: 0;
width : 100vw;
height: 100vh;
transition: background-color 1.5s linear;
}
</style>
</head>
<body >
<script >
"use strict";
/* Author : Claude Chauvet (https://codepen.io/Dillo)
/* very much inspired by mandala vı https://codepen.io/smlsvnssn/pen/VQwyJN by smlsvnssn (@smlsvnssn) */
window.addEventListener("load", function () {
const mrandom = Math.random;
const mfloor = Math.floor;
const mround = Math.round;
const mceil = Math.ceil;
const mabs = Math.abs;
const mmin = Math.min;
const mmax = Math.max;
const mPI = Math.PI;
const mPIS2 = Math.PI / 2;
const m2PI = Math.PI * 2;
const msin = Math.sin;
const mcos = Math.cos;
const matan2 = Math.atan2;
const mhypot = Math.hypot;
const msqrt = Math.sqrt;
let maxx, maxy;
let repeat, nbPoly, polyodous;
let tx, ty; // tables of cosines / sines
let withBlur;
/* ============================================================================
This hash function is based upon Johannes Baagoe's carefully designed and efficient hash
function for use with JavaScript. It has a proven "avalanche" effect such
that every bit of the input affects every bit of the output 50% of the time,
which is good. See: http://baagoe.com/en/RandomMusings/hash/avalanche.xhtml
============================================================================
*/
/* This function returns a hash function depending on a seed.
if no seed is provided (or a falsy value), Math.random() is used.
The returned function always returns the same number in the range [0..1[ for the
sam.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0