html div 凸起,HTML5 圆形柔性凸起

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.requestAnimFrame = (function() {

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

var distance = function(a, b) {

var dx = a.x - b.x;

var dy = a.y - b.y;

return Math.sqrt(dx * dx + dy * dy);

};

var canvas = document.createElement("canvas");

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");

window.addEventListener("resize", function() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

});

var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);

gradient.addColorStop(.45, "rgba(120, 22, 126, 1)");

gradient.addColorStop(.55, "rgba(144, 85, 160, 1)");

// gradient.addColorStop(0, "rgba(255, 0, 0, 1)");

// gradient.addColorStop(1, "rgba(0, 255, 0, 1)");

var params = {

radius: 500,

easing: .1,

pullForce: .5,

t: .2

};

var points = [];

var mouse = {

x: 0,

y: 0

};

window.addEventListener("mousemove", function(e) {

mouse.x = e.clientX;

mouse.y = e.clientY;

});

var gui = new dat.GUI();

gui.add(params, "radius", 10, 500);

gui.add(params, "pullForce", 0, 1).step(.001);

gui.add(params, "easing", 0, .2).step(.001);

gui.add(params, "t", 0, 1).step(.001);

init();

draw();

function init() {

var numPoints = 100;

var radius = 200;

for (var i = 0; i < numPoints; i++) {

var theta = i / numPoints * Math.PI * 2.0;

var x = Math.cos(theta) * radius;

var y = Math.sin(theta) * radius;

var p = {

x: x,

y: y,

ox: x,

oy: y,

color: "#fff"

}

points.push(p);

}

}

function update() {

var sx = canvas.width * .5;

var sy = canvas.height * .5;

var MIN_DIST = params.radius;

for (var i = 0; i < points.length; i++) {

var p = points[i];

var pos = {

x: p.ox + sx,

y: p.oy + sy

};

var dist = distance(pos, mouse);

var tx, ty;

if (dist < MIN_DIST) {

var offset = 1.0 - Math.sin(dist / MIN_DIST * Math.PI * .5);

var t = params.t;

offset *= params.pullForce;

var dx = mouse.x - pos.x;

var dy = mouse.y - pos.y;

tx = p.ox + (dx + p.ox * t) * offset;

ty = p.oy + (dy + p.oy * t) * offset;

p.color = "#f60";

} else {

tx = p.ox;

ty = p.oy;

p.color = "#fff";

}

p.x += (tx - p.x) * params.easing;

p.y += (ty - p.y) * params.easing;

}

}

function draw() {

update();

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

ctx.fillStyle = gradient;

ctx.beginPath();

var sx = canvas.width * .5;

var sy = canvas.height * .5;

// ctx.save();

// ctx.translate(sx, sy);

for (var i = 0; i < points.length; i++) {

var p = points[i];

if (i == 0) ctx.moveTo(sx + p.x, sy + p.y);

else ctx.lineTo(sx + p.x, sy + p.y);

}

var p = points[0];

ctx.lineTo(sx + p.x, sy + p.y);

ctx.fill();

// ctx.restore();

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

// ctx.fillStyle = gradient;

// ctx.fillRect(0, 0, canvas.width, canvas.height);

requestAnimFrame(draw);

}