可交互眼睛可用Canvas或SVG实现：Canvas适合实时渲染，通过mousemove动态计算瞳孔偏移并清屏重绘；SVG支持DOM操作与CSS动画，可直接修改cx/cy或用transform优化性能；离屏渲染与symbol复用分别提升多实例帧率与可维护性。
如果您希望在网页中使用HTML5技术绘制一只可交互的眼睛，包括眼球、瞳孔，并通过JavaScript实现动态效果，则可以借助Canvas或SVG两种主流方案。以下是具体实现方法：
一、使用Canvas绘制静态眼睛并用JS控制瞳孔跟随鼠标
Canvas提供像素级绘图能力，适合实时渲染动态变化的瞳孔位置。通过监听鼠标移动事件，计算瞳孔相对于眼白中心的偏移量，限制其在合理范围内移动，从而模拟真实眼球转动效果。
1、在HTML中添加<canvas id="eye"></canvas>元素，并设置固定宽高（如200×200）。
2、获取Canvas上下文：const ctx = document.getElementById('eye').getContext('2d');
立即学习“前端免费学习笔记（深入）”；
3、定义眼睛参数：眼白半径、虹膜半径、瞳孔半径、中心坐标（cx, cy）。
4、绘制白色眼白背景：ctx.beginPath(); ctx.arc(cx, cy, 100, 0, Math.PI * 2); ctx.fillStyle = '#fff'; ctx.fill();
5、绘制灰色虹膜：ctx.beginPath(); ctx.arc(cx, cy, 40, 0, Math.PI * 2); ctx.fillStyle = '#aaa'; ctx.fill();
6、绘制黑色瞳孔：ctx.beginPath(); ctx.arc(pupilX, pupilY, 12, 0, Math.PI * 2); ctx.fillStyle = '#000'; ctx.fill();，其中pupilX/pupilY由鼠标位置动态计算得出。
7、绑定mousemove事件，在回调中根据鼠标与画布中心的距离，按比例缩放瞳孔偏移量，并确保偏移不超过虹膜边界。
8、每次移动后调用ctx.clearRect(0, 0, canvas.width, canvas.height)清屏，再重绘全部图层。
二、使用SVG绘制结构化眼睛并用JS修改瞳孔位置
SVG以矢量方式描述图形，天然支持DOM操作和CSS动画，适合需要高保真缩放、响应式布局或后期样式调整的场景。瞳孔作为独立<circle></circle>元素，可通过JS直接修改其cx和cy属性实现位移。
1、在HTML中嵌入SVG代码，设定<svg width="200" height="200" viewbox="0 0 200 200"></svg>。
2、绘制眼白：<circle cx="100" cy="100" r="90" fill="#fff" stroke="#ccc" stroke-width="2"></circle>
3、绘制虹膜：<circle cx="100" cy="100" r="40" fill="#aaa"></circle>
4、绘制瞳孔并赋予id：<circle id="pupil" cx="100" cy="100" r="12" fill="#000"></circle>
5、获取瞳孔元素：const pupil = document.getElementById('pupil');
6、监听mousemove事件，计算相对偏移：const dx = (e.clientX - rect.left) - 100;，const dy = (e.clientY - rect.top) - 100;
7、限制最大偏移量（如±8），计算新坐标：const maxX = 8, maxY = 8;，pupil.setAttribute('cx', 100 + Math.max(-maxX, Math.min(maxX, dx * 0.05)));
8、为提升视觉效果，可对#pupil添加transition: cx 0.1s ease, cy 0.1s ease;内联style或CSS规则。
三、使用SVG+CSS transform实现轻量级动态瞳孔
该方法避免频繁操作DOM属性，改用CSS transform: translate()驱动瞳孔位移，性能更优且兼容性好，适用于需兼顾低端设备的项目。
1、将瞳孔包裹进<g></g>容器：<g id="pupil-group"><circle r="12" fill="#000"></circle></g>
2、为#pupil-group设置初始transform：style="transform: translate(0px, 0px);"
3、监听鼠标事件，计算归一化偏移值（-1 到 1 区间）：
4、根据鼠标距SVG中心的水平/垂直距离，除以最大有效距离（如80px），得到ratioX和ratioY。
5、应用约束：const clamp = (v) => Math.max(-1, Math.min(1, v));，const tx = clamp(ratioX) * 6;，const ty = clamp(ratioY) * 6;
6、更新样式：pupilGroup.style.transform = `translate(${tx}px, ${ty}px)`;
7、确保SVG容器启用pointer-events: none;，而瞳孔组启用pointer-events: auto;，防止事件被遮挡。
四、Canvas离屏渲染优化瞳孔动画帧率
当页面存在多个眼睛实例或需高频更新时，直接每帧清屏重绘可能导致闪烁或卡顿。采用离屏Canvas预先绘制眼白与虹膜，主Canvas仅负责合成与瞳孔绘制，可显著减少重复计算。
1、创建离屏Canvas：const offscreen = document.createElement('canvas'); offscreen.width = 200; offscreen.height = 200;
2、获取其上下文，一次性绘制眼白和虹膜并保存图像数据：const eyeBase = offscreen.getContext('2d').getImageData(0, 0, 200, 200);
3、主Canvas每帧先用ctx.putImageData(eyeBase, 0, 0)快速贴回底图。
4、再单独绘制瞳孔：ctx.beginPath(); ctx.arc(pupilX, pupilY, 12, 0, Math.PI * 2); ctx.fill();
5、使用requestAnimationFrame替代mousemove直接驱动绘制循环，使动画更平滑。
6、在mousemove中仅更新pupilX和pupilY变量，不触发重绘。
7、若需多只眼睛，复用同一份eyeBase数据，仅改变瞳孔坐标即可。
五、SVG Symbol复用+JS实例化多眼睛
利用SVG的<symbol></symbol>定义眼睛模板，配合<use></use>引用，可在单页中高效生成多个独立可控的眼睛，每个实例拥有唯一ID便于JS精准控制。
1、在<svg style="position: absolute; width: 0; height: 0;"></svg>中定义symbol：<symbol id="eye-template" viewbox="0 0 200 200">...</symbol>，包含眼白、虹膜、带id的瞳孔。
2、在页面任意位置插入实例：<svg class="eye-instance"><use href="#eye-template"></use></svg>
3、为每个实例添加唯一data-id属性：data-id="eye-1"，并在JS中收集所有实例：document.querySelectorAll('.eye-instance')。
4、遍历实例，为每个<use></use>元素查找其内部瞳孔——需通过shadowRoot或提前在symbol中为瞳孔设置class如class="pupil"。
5、监听全局mousemove，对每个实例分别计算本地坐标系下的鼠标偏移（考虑SVG的transform和滚动偏移）。
6、使用instance.querySelector('.pupil').setAttribute('cx', newX)更新对应瞳孔。
7、为防止跨域限制影响<use></use>内部查询，建议将symbol定义置于同一文档内，不使用外部SVG文件引用。
