Пример:
HTML:
1 |
<canvas id="canvas"></canvas> |
CSS:
1 2 3 4 |
#canvas { width:100%; height: 500px; } |
JS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; let eyes = []; let theta; const mouse = { x: undefined, y: undefined }; window.addEventListener("mousemove", function (e) { mouse.x = e.clientX - canvas.getBoundingClientRect().left; mouse.y = e.clientY - canvas.getBoundingClientRect().top; }); class Eye { constructor(x, y, radius) { this.x = x; this.y = y; this.radius = radius; } draw() { let dx = mouse.x - this.x; let dy = mouse.y - this.y; theta = Math.atan2(dy, dx); // глаз ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.fillStyle = "rgb(51, 122, 183)"; ctx.fill(); ctx.closePath(); // радужная оболочка let iris_x = this.x + Math.cos(theta) * this.radius / 10; let iris_y = this.y + Math.sin(theta) * this.radius / 10; let irisRadius = this.radius / 1.2; ctx.beginPath(); ctx.arc(iris_x, iris_y, irisRadius, 0, Math.PI * 2, true); ctx.fillStyle = "white"; ctx.fill(); ctx.closePath(); // зрачок let pupilRadius = this.radius / 2.5; let pupil_x = this.x + Math.cos(theta) * this.radius / 1.9; let pupil_y = this.y + Math.sin(theta) * this.radius / 1.9; ctx.beginPath(); ctx.arc(pupil_x, pupil_y, pupilRadius, 0, Math.PI * 2, true); ctx.fillStyle = "black"; ctx.fill(); ctx.closePath(); // отражение зрачка ctx.beginPath(); ctx.arc(pupil_x - pupilRadius / 3, pupil_y - pupilRadius / 3, pupilRadius / 2, 0, Math.PI * 2, true); ctx.fillStyle = "rgb(255,255,255)"; ctx.fill(); ctx.closePath(); } } function init() { eyes = []; let overlapping = false; let numberOfEyes = Math.random()*40+50; // Кол-во глаз let protection = 10000; let counter = 0; while (eyes.length < numberOfEyes && counter < protection) { let eye = { x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.floor(Math.random() * 140) + 10 // радиус глаз }; overlapping = false; for (let i = 0; i < eyes.length; i++) { let previousEye = eyes[i]; let dx = eye.x - previousEye.x; let dy = eye.y - previousEye.y; let distance = Math.sqrt(dx * dx + dy * dy); if (distance < (eye.radius + previousEye.radius)) { overlapping = true; break; } } if (!overlapping) { eyes.push(new Eye(eye.x, eye.y, eye.radius)); } counter++; } } function animate() { requestAnimationFrame(animate); ctx.fillStyle = "rgb(191, 226, 255)"; ctx.fillRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < eyes.length; i++) { eyes[i].draw(); } } init(); animate(); window.addEventListener("resize", function () { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; init(); }) |
Найдено на codepen.io у пользователя Sandip Dust
[big]
[code]
[green][red][blue][b]