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: #000;
margin: 0;
padding: 0;
border-width: 0;
}
</style>
</head>
<body translate="no">
<script >
"use strict";
const nbEddies = 7;
const nbParticles = 1003; // number of particles
const lifeTime = 1000; // average lifetime of particles
let noGen;
let canv, ctx; // canvas and drawing context
let maxx, maxy; // size of client Window
let lRef, rWidth, rHeight;
let eddies; // array of eddies
let particles; // array of particles
let messages; // ID provided by window.requestAnimationFrame();
let globHue;
let tbCells, cells, kcell;
let ncx, ncy;
/* shortcuts for Math */
const mrandom = Math.random; // see above alternative function for reproductible results
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 mexp = Math.exp;
const mhypot = Math.hypot;
const msqrt = Math.sqrt;
//-----------------------------------------------------------------------------
// miscellaneous functions
//-----------------------------------------------------------------------------
function alea(min, max) {
// random number [min..max[ . If no max is provided, [0..min[
if (type.........完整代码请登录后点击上方下载按钮下载查看
网友评论0