js实现canvas竹子编织面动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现canvas竹子编织面动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body> <script > "use strict"; // Paul Slaymaker, paul25882@gmail.com const body = document.getElementsByTagName("body").item(0); body.style.background = "#000"; body.style.display = "grid"; const TP = 2 * Math.PI; const CSIZE = 400; const ctx = (() => { let d = document.createElement("div"); d.style.textAlign = "center"; body.append(d); let c = document.createElement("canvas"); c.width = 2 * CSIZE; c.height = 2 * CSIZE; c.style.border = "10px gray outset"; d.append(c); return c.getContext("2d"); })(); var getRandomInt = (min, max, low) => { if (low) { return Math.floor(Math.random() * Math.random() * (max - min)) + min; } else { return Math.floor(Math.random() * (max - min)) + min; } }; onresize = function () { let D = Math.min(window.innerWidth, window.innerHeight) - 40; ctx.canvas.style.width = D + "px"; ctx.canvas.style.height = D + "px"; }; ctx.translate(CSIZE, CSIZE); ctx.lineCap = "round"; const COUNT = 20; // factor of CSIZE? var edge = 360; var seg = 300; var colors = []; // as object var setColors = () => { colors = []; //let K=COUNT/2; let K = getRandomInt(2, COUNT / 2 - 2); let hue = getRandomInt(0, 180, true) + 30; for (let i = 0; i < K; i++) { let hd = Math.round(360 / K) + getRandomInt(-20, 20); let sat = 70 + getRandomInt(0, 31); let lum = 40 + getRandomInt(0, 31); //colors.push("hsla("+((hue+i*hd)%360)+","+sat+"%,"+lum+"%,0.6)"); colors.push("hsl(" + (hue + i * hd) % 360 + "," + sat + "%," + lum + "%)"); } }; var cindexh = []; var cindexv = []; var setColorIndexes = () => { cindexh = []; cindexv = []; for (let i = 0; i < COUNT / 2 - 1; i++) { cindexh.push(i % colors.length); cindexv.push(i % colors.length); } // (()=>{ let no = []; do no.push(cindexh.splice(getRandomInt(0, cindexh.length), 1)[0]); while ( cindexh.length > 0); cindexh = no; no = []; do no.push(cindexv.splice(getRandomInt(0, cindexv.length), 1)[0]); while ( cindexv.length > 0); cindexv = no; // })(); }; setColors(); setColorIndexes(); var restCount = 0; function Line(vh, x, y, color, r) { this.vh = vh; this.x = x; this.y = y; this.color = color; if (this.vh == "h") this.color = colors[cindexh[r]];else this.color = colors[cindexv[r]]; this.o = 0; this.inc = 0; this.r = r; this.drawLine = () => { ctx.beginPath(); if (vh == "h") { ctx.moveTo(-edge + this.o, this.y); ctx.lineTo(edge + this.o, this.y); } else { ctx.moveTo(this.x, -edge + this.o); ctx.lineTo(this.x, edge + this.o); } ctx.strokeStyle = this.color; ctx.stroke(); }; this.d = 0; this.move = () => { if (Math.abs(this.o) > 2 * CSIZE) { // make this choice a line property if (Math.random() < 0.5) this.o = -this.o;else this.inc = -this.inc; if (this.vh == "h") this.color = colors[cindexh[this.r]];else this.color = colors[cindexv[this.r]]; } if (t > this.d) { this.o += this.inc; if (this.inc != 0 && Math.abs(this.o) < 0.1) { this.inc = 0; restCount++; this.o = 0; } } }; } var linesh = (() => { let a = []; for (let i = 0; i < COUNT / 2 - 1; i++) { a.push(new Line("h", 0,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0