如何用arcTo绘制眼睛？眼白绘制及眼角实现遇问题求助

嘿，我来帮你捋捋这个眼睛绘制的麻烦～你提到用arcTo画眼白时遇到了眼角的问题，其实arcTo的设计逻辑确实不太适合直接画眼角这种带尖角的弧度，先给你分析下原因，再给你几个更顺手的解决方案。

为什么arcTo不太适合画眼角？ #

arcTo(x1, y1, x2, y2, radius)的核心是绘制两条切线之间的圆弧：它会从当前路径点出发，先画一条直线到与(x1,y1)的切线点，再绘制一段与两条线（当前点→(x1,y1)、(x1,y1)→(x2,y2)）相切的圆弧，最后连接到(x2,y2)的切线点。这种逻辑更适合做平滑的转角（比如圆角矩形），但对于眼角这种需要精准尖点+柔和弧度的形状，控制起来会很别扭，参数稍微不对就出不来想要的效果。

更适合画眼睛的方法：二次贝塞尔曲线 #

要画自然的眼白（带尖角眼角），用quadraticCurveTo会直观很多，你可以直接定义曲线的控制点，轻松调整眼角的尖锐度和眼型的圆润度。给你个示例代码：

function main() {
  var c2d = document.getElementById("acanvas").getContext("2d");
  olho(c2d);
}

function olho(c2d) {
  // 先清画布，避免重复绘制
  c2d.clearRect(0, 0, c2d.canvas.width, c2d.canvas.height);
  
  // 开始绘制眼白路径
  c2d.beginPath();
  // 左眼角起点
  c2d.moveTo(120, 220);
  // 上半弧：从左眼角到右眼角，用二次贝塞尔曲线（控制点在上方）
  c2d.quadraticCurveTo(155, 200, 190, 220);
  // 下半弧：从右眼角回到左眼角，控制点在下方
  c2d.quadraticCurveTo(155, 240, 120, 220);
  // 闭合路径
  c2d.closePath();
  
  // 填充眼白
  c2d.fillStyle = 'white';
  c2d.fill();
  // 描边轮廓
  c2d.strokeStyle = 'black';
  c2d.stroke();

  // 标记关键点（方便你调整位置）
  c2d.fillStyle = 'blue';
  c2d.fillRect(120-5, 220-5, 10, 10); // 左眼角
  c2d.fillRect(190-5, 220-5, 10, 10); // 右眼角
  c2d.fillStyle = 'red';
  c2d.fillRect(155-5, 200-5, 10, 10); // 上曲线控制点
  c2d.fillRect(155-5, 240-5, 10, 10); // 下曲线控制点
}

这段代码里，左右两个蓝色方块就是眼角的尖点，红色方块是控制上下弧度的控制点——你可以拖动这些控制点的位置，轻松调整眼睛的宽窄、弧度大小，眼角的尖锐度也能完美保留。

如果非要用arcTo怎么调整？ #

要是你想试试用arcTo实现，得调整控制点和半径参数，让圆弧刚好在眼角处收尖。示例如下：

function olhoWithArcTo(c2d) {
  c2d.clearRect(0, 0, c2d.canvas.width, c2d.canvas.height);
  
  c2d.beginPath();
  // 从右眼角下方开始
  c2d.moveTo(190, 230);
  // 绘制上半弧：控制点在上方，半径控制弧度大小
  c2d.arcTo(155, 200, 120, 230, 20);
  // 绘制下半弧：控制点在下方，保持和上半弧一致的半径
  c2d.arcTo(155, 240, 190, 230, 20);
  c2d.closePath();
  
  c2d.fillStyle = 'white';
  c2d.fill();
  c2d.strokeStyle = 'black';
  c2d.stroke();

  // 标记控制点
  c2d.fillStyle = 'blue';
  c2d.fillRect(190-5,230-5,10,10);
  c2d.fillRect(120-5,230-5,10,10);
  c2d.fillStyle = 'red';
  c2d.fillRect(155-5,200-5,10,10);
  c2d.fillRect(155-5,240-5,10,10);
}

这里的radius参数很关键：数值越小，眼角越尖；数值越大，眼型越圆。但相比贝塞尔曲线，这种方式的可控性还是差一些，需要反复调整参数才能得到满意的效果。

总的来说，画眼睛这种带尖角的圆润形状，二次贝塞尔曲线是更省心的选择～

内容的提问来源于stack exchange，提问作者user7391306