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;
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0