canvas实现彩色线条运动的屏幕保护动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现彩色线条运动的屏幕保护动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ padding: 0; margin: 0; } #world{ display: block; background-color: #000000; } </style> </head> <body> <canvas id='world'></canvas> <script> !+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+! function (d, w) { var FPS = 30; //FPS var F = 300; //焦点距離 var N = 3; //軌跡の本数 var VERTEX_MAX = 10; //軌跡の長さ var TRAIL_QUALITY = 4000; //軌跡のクオリティ var mu = 0.5; //前のアンカーポイントへの依存具合 var bmRandom = function (mu, sigma) { var x,y,r,tmp = null,tmp2; return function () { if (tmp !== null) { tmp2 = tmp; tmp = null; return y * tmp2 + mu; } do { x = Math.random() * 2 - 1; y = Math.random() * 2 - 1; r = x * x + y * y; } while (r >= 1); tmp = sigma * Math.sqrt(-2 * Math.log(r) / r); return x * tmp + mu; }; }; pointCopy = function (src, dst) { dst.x = src.x; dst.y = src.y; dst.z = src.z; return dst; }; Trail = function (pos, t, color_f) { this.pos = { x: 0, y: 0, z: 0 }; this.start = { x: 0, y: 0, z: 0 }; this.goal = { x: 0, y: 0, z: 0 }; this.anchor_1 = { x: 0, y: 0, z: 0 }; this.anchor_2 = { x: 0, y: 0, z: 0 }; this.start_time = 0; this.take_time = 1; this.vertexes = []; this.anchors_1 = []; this.anchors_2 = []; this.color_f = color_f; pointCopy(pos, this.pos); pointCopy(pos, this.start); pointCopy(pos, this.goal); this.setNextGoal(t); }; Trail.prototype.setNextGoal = function (t, target) { pointCopy(this.goal, this.start); this.anchor_1.x = this.start.x + (this.start.x - this.anchor_2.x) * mu; this.anchor_1.y = this.start.y + (this.start.y - this.anchor_2.y) * mu; this.anchor_1.z = this.start.z + (this.start.z - this.anchor_2.z) * mu; if (target) { this.anchor_2.x = (this.anchor_1.x + target.x) / 2 + myrand(); this.anchor_2.y = (this.anchor_1.y + target.y) / 2 + myrand(); this.anchor_2.z = (this.anchor_1.z + target.z) / 2 + myrand(); this.goal.x = target.x; this.goal.y = target.y; this.goal.z = target.z; } else { this.anchor_2.x = this.anchor_1.x + myrand(); this.anchor_2.y = this.anchor_1.y + myrand(); this.anchor_2.z = this.anchor_1.z + myrand(); this.goal.x = this.anchor_2.x + myrand(); this.goal.y = this.anchor_2.y + myrand(); this.goal.z = this.anchor_2.z + myrand(); } this.start_time = t; this.take_time = 200 + Math.random() * 200; this.vertexes.push(pointCopy(this.start, { x: 0, y: 0, z: 0 })); this.anchors_1.push(pointCopy(this.anchor_1, { x: 0, y: 0, z: 0 })); this.anchors_2.push(pointCopy(this.anchor_2, { x: 0, y: 0, z: 0 })); if (this.vertexes.length > VERTEX_MAX) { this.vertexes.splice(0, this.vertexes.length - VERTEX_MAX); this.anchors_1.splice(0, this.anchors_1.length - VERTEX_MAX); this.anchors_2.splice(0, this.anchors_2.length - VERTEX_MAX); } }; Trail.prototype.update = function (t, target) { bezier3( t - this.start_time, this.start, this.anchor_1, this.anchor_2, this.goal, this.take_time, this.pos); if (t - this.start_time > this.take_time) { this.setNextGoal(this.start_time + this.take_time, target); this.update(t, target); } }; Trail.prototype.draw = function (ctx, camera, t) { var i,dz,dt,ddt,rt,a,v = { x: 0, y: 0, z: 0 }; var ps = { x: 0, y: 0 }; ctx.beginPath(); if (perspective(this.vertexes[0], camera, ps)) { ctx.moveTo(ps.x, ps.y); } var x0 = ps.x; rt = (t - this.start_time) / this.take_time; for (i = 1; i < this.vertexes.length; i++) { ddt = 0.01; for (dt = 0; dt < 1; dt += ddt) { bezier3(dt, this.vertexes[i - 1], this.anchors_1[i - 1], this.anchors_2[i - 1], this.vertexes[i], 1, v); if (perspective(v, camera, ps)) { dz = v.z - camera.z; a = 1 - (this.vertexes.length - i + 1 - dt + rt) / VERTEX_MAX; this.color_f(ctx, a, dz); ctx.lineTo(ps.x, ps.y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(ps.x, ps.........完整代码请登录后点击上方下载按钮下载查看
网友评论0