Canvas кнопка меню
∘HTML 09.10.19 09.10.19 504
на главную сниппетов
<![CDATA[
<script>
let ctx = canvas.getContext('2d');
let cos = Math.cos,
sin = Math.sin,
k = 300,
a1 = 0,
a2 = 0,
dir = 0,
far = 300,
w = canvas.width,
h = canvas.height,
planes = [];
for (var i=-20; i<21; i+=20) {
addRect(10,10,20,i,-20)
addRect(10,10,-20,i,-20)
addDiag(15,10,20,i,-20)
addDiag(-15,10,20,i,-20)
}
addTopDiag(25,15,-25,20)
addTopDiag(-25,-15,-25,20)
function addTopDiag(x1,x2,dy,dz) {
whitePlane([
pt(-x1, dy, -dz),
pt(-x2, dy, -dz),
pt(x1, dy, dz),
pt(x2, dy, dz)
]);
}
function addDiag(w, h, dx=0, dy=0, dz=0){
whitePlane([
pt(0, h/2+dy, -5),
pt(0, -h/2+dy, -5),
pt(w, -h/2+dy, dz),
pt(w, h/2+dy, dz)
]);
}
function addRect(w, h, dx=0, dy=0, dz=0){
whitePlane([
pt(-w/2+dx, -h/2+dy, dz),
pt(-w/2+dx, h/2+dy, dz),
pt(w/2+dx, h/2+dy, dz),
pt(w/2+dx, -h/2+dy,dz)
]);
}
requestAnimationFrame(render)
function whitePlane(points){
planes.push({color: 'white', points});
}
function pt(x,y,z){
return {x, y, z, state:{}};
}
function project(p) {
let x = p.x*cos(a1) + p.z*sin(a1);
let z = p.z*cos(a1) - p.x*sin(a1);
let y = p.y*cos(a2) + z*sin(a2);
let d = z*cos(a2) - p.y*sin(a2) + far;
p.state.cx = (k/d)*x + w/2;
p.state.cy = (k/d)*y + h/2;
p.state.r = far/d*p.r;
}
function render() {
a2 += dir * 0.05;
if (a2 < -Math.PI/2 || a2 > 0){
dir = 0;
a2 = a2 > 0 ? 0 : -Math.PI/2;
} else {
requestAnimationFrame(render)
}
planes.forEach(plane => plane.points.forEach(project));
ctx.clearRect(0,0,w,h)
planes.forEach(drawPlane);
}
function drawPlane(plane){
ctx.fillStyle = plane.color;
ctx.beginPath();
ctx.moveTo(plane.points[0].state.cx, plane.points[0].state.cy);
for (var i=1; i< plane.points.length; i++)
ctx.lineTo(plane.points[i].state.cx, plane.points[i].state.cy);
ctx.fill();
ctx.closePath();
}
addEventListener('click', e => {
dir = a2 === 0 ? -1 : 1
requestAnimationFrame(render)
});
</script>
<style>
body {
background: url(https://picsum.photos/id/22/700/200);
}
canvas {
cursor: pointer;
}
</style>
<canvas id=canvas width=90 height=90></canvas>
]]>на главную сниппетов
