js仿真花

Html

Css

* {
	-moz-user-select:none;
	-webkit-user-select:none;
}
html,body {
	color:#bbb;
	text-align:center;
	margin:0;
	overflow:hidden;
}
footer strong {
	font-size:20px;
	margin-right:6px;
}
footer {
	position:fixed;
	bottom:0;
	left:50%;
	font-size:15px;
	-moz-transform:-moz-translateX(-50%);
	-webkit-transform:-webkit-translateX(-50%);
	transform:translateX(-50%);
}

var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
var pi2 = 2 * pi;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var cw = canvas.width = window.innerWidth;
var ch = canvas.height = window.innerHeight;
var cx = ~~(cw / 2);
var cy = ~~(ch / 2);

// 初始点集
var data = [];
// 变换后点集
var points = [];

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

// 类：点
var Point = function(cx, cy, r, angle, process) {
    this.ang = angle;
    this.process = process || 1;
    this.r = r;
    Object.defineProperties(this, {
        x: {
            configurable: true,
            enumerable: true,
            get: function() {
                return cx + this.r * cos(this.ang);
            }
        },
        y: {
            configurable: true,
            enumerable: true,
            get: function() {
                return cy + this.r * sin(this.ang);
            }
        }
    });
}
// 计算data、points
function initPoints() {
    data = points = [];
    for (var i = 0; i < 2000; i++) {
        var theta = pi2 * i / 2000;
        data[i] = new Point(cx, cy, 100, theta);
    }
    for (var i = 0; i < data.length; i++) {
        var p = i * 5 % 2000 / 2000;
        var theta = data[i].ang + pi + 0.006981 * easeAng(p);
        points[i] = new Point(data[i].x, data[i].y, 90 * easeR(p), theta, p);
    }
}
initPoints();
// 半径缩放缓动函数
function easeR(p) {
    var e = 0;
    if (p >= 0 && p <= 0.5) {
        e = 2.8 * p + 0.3;
    } else if (p <= 1) {
        e = -2.8 * p + 3.1;
    }
    return e;
}
// 旋转角度缓动函数
function easeAng(p) {
    var e = 0;
    if (p >= 0 && p <= 0.25) {
        e = 4 * p;
    } else if (p <= 0.75) {
        e = -4 * p + 2;
    } else if (p <= 1) {
        e = 4 * p - 4;
    }
    return e;
}
// 绘制点
function render() {
    ctx.fillStyle = "gold";
    var v, p;
    for (var i = 0; i < data.length; i++) {
        p = points[i];
        ctx.fillRect(p.x, p.y, 1, 1);
    };
}
// 更新点坐标
function update(process) {
    var i, point, p, eAng, eR;
    for (i = 0; i < points.length; i++) {
        point = points[i];
        p = process + point.process;
        p = p % 1;
        eAng = easeAng(p);
        eR = easeR(p);
        point.ang = data[i].ang + pi + 0.006981 * eAng;
        point.r = 90 * eR;
    }
}
// 程序开始时刻
var staticSt = lastSt = Date.now();
// 动画行进状态，[0,1]，程序开始时计算
var process = 0;
// 动画循环
function refresh() {
    if (Date.now() - lastSt < 16) {
        return requestAnimationFrame(refresh);
    }
    ctx.fillStyle = "rgba(0,0,0,.08)";
    ctx.fillRect(0, 0, cw, ch);
    render();
    process += 16 / 2570;
    process %= 1;
    update(process);
    lastSt = Date.now();
    requestAnimationFrame(refresh);
}
refresh();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js仿真花



代码描述：Canvas绘制花朵，形状类似紫荆花，会进行周期性变化

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

bibibobo

相关代码

js仿真花

最新