Canvas кнопка меню

09.10.19 20:14:14 09.10.19 21:41:44 95
<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>