JavaScript

語言：

JaveScriptBabelCoffeeScript

確定

(function() {

this.Easing = (function() {

function Easing() {}

Easing.easeOutCubic = function(t) {

return 4 * t * t * t;

};

Easing.easeInOutCubic = function(t) {

if (t < .5) {

return 4 * t * t * t;

} else {

return (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;

}

};

return Easing;

})();

this.Point = (function() {

function Point(x1, y1) {

this.x = x1;

this.y = y1;

}

return Point;

})();

this.Circle = (function() {

function Circle(c1, r, color1, duration) {

this.c = c1;

this.r = r;

this.color = color1;

this.duration = duration;

this.offset = new Point(3, 3);

}

Circle.prototype.updateShadowOffset = function(lightPoint, maxD) {

return this.offset = new Point((this.c.x - lightPoint.x) / maxD * 200 + 3, (this.c.y - lightPoint.y) / maxD * 200 + 3);

};

Circle.prototype.movecenter = function(p1, p2, startTime, maxD) {

var t;

t = new Date().getTime() - startTime;

if (t >= this.duration) {

return;

}

t /= this.duration;

t = Easing.easeInOutCubic(t);

this.c.x = p1.x + t * (p2.x - p1.x);

this.c.y = p1.y + t * (p2.y - p1.y);

this.updateShadowOffset(p2, maxD);

return requestAnimationFrame((function(_this) {

return function() {

return _this.movecenter(p1, p2, startTime, maxD);

};

})(this));

};

return Circle;

})();

this.Hypnotic = (function() {

function Hypnotic(id, numCircles) {

var color, diagonal, i, j, ref, self, step, timeStep;

this.numCircles = numCircles;

this.canvas = document.getElementById(id);

this.canvas.width = this.canvas.clientWidth;

this.canvas.height = this.canvas.clientHeight;

this.ctx = this.canvas.getContext('2d');

diagonal = Math.sqrt(this.canvas.width * this.canvas.width + this.canvas.height * this.canvas.height);

step = diagonal / this.numCircles;

timeStep = 5000 / this.numCircles;

this.circles = [];

for (i = j = 1, ref = this.numCircles; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {

color = i % 2 === 0 ? '#FFFFFF' : '#4BB5C1';

this.circles.push(new Circle(new Point(0, this.canvas.height / 2), step * i, color, timeStep * i));

}

this.circles.reverse();

self = this;

$('#' + id).mousemove(function(e) {

var c, k, len, now, offset, ref1, results, x, y;

offset = $(this).offset();

x = e.pageX - offset.left;

y = e.pageY - offset.top;

now = new Date().getTime();

ref1 = self.circles;

results = [];

for (k = 0, len = ref1.length; k < len; k++) {

c = ref1[k];

results.push(c.movecenter(c.c, new Point(x, y), new Date().getTime(), Math.max(self.canvas.width, self.canvas.height)));

}

return results;

});

$('#' + id).on('touchmove', function(e) {

var c, k, len, ref1, results, touch;

touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

ref1 = self.circles;

results = [];

for (k = 0, len = ref1.length; k < len; k++) {

c = ref1[k];

results.push(c.movecenter(c.c, new Point(touch.pageX, touch.pageY), new Date().getTime(), Math.max(self.canvas.width, self.canvas.height)));

}

return results;

});

$('#' + id).mouseleave(function(e) {

return self.recenter();

});

}

Hypnotic.prototype.recenter = function() {

var c, j, len, ref, results;

ref = this.circles;

results = [];

for (j = 0, len = ref.length; j < len; j++) {

c = ref[j];

results.push(c.movecenter(c.c, new Point(this.canvas.width / 2, this.canvas.height / 2), new Date().getTime(), Math.max(this.canvas.width, this.canvas.height)));

}

return results;

};

Hypnotic.prototype.run = function() {

this.draw();

return this.recenter();

};

Hypnotic.prototype.draw = function() {

var c, j, len, ref;

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

ref = this.circles;

for (j = 0, len = ref.length; j < len; j++) {

c = ref[j];

this.ctx.moveTo(c.c.x, c.c.y);

this.ctx.fillStyle = c.color;

this.ctx.shadowColor = 'rgba(0,0,0,0.2)';

this.ctx.shadowOffsetX = c.offset.x;

this.ctx.shadowOffsetY = c.offset.y;

this.ctx.beginPath();

this.ctx.arc(c.c.x, c.c.y, c.r, 0, Math.PI * 2);

this.ctx.fill();

}

return requestAnimationFrame(((function(_this) {

return function() {

return _this.draw();

};

})(this)));

};

return Hypnotic;

})();

$(function() {

var anim;

anim = new Hypnotic('fg', 20);

return anim.run();

});

}).call(this);

總結

以上是生活随笔為你收集整理的html5同心圆代码,HTML5/Canvas 鼠标跟随的同心圆的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。