如何让Canvas代码实现的Bezier曲线与Canvature工具绘制效果一致？

我用Canvature工具设计了一条贝塞尔曲线，参考效果如下：

但用以下Canvas代码实现后，曲线显示效果异常，请问怎么调整才能让实现的曲线和工具里的效果一致？

原代码示例 #

JavaScript代码：

function letraT1(c2d) { 
  c2d.beginPath(); 
  c2d.moveTo(0.376, 0.32); 
  c2d.bezierCurveTo(0.349,0.223,0.426,0.217,0.453,0.399); 
  c2d.moveTo(0.376, 0.32); 
  c2d.closePath(); 
} 
function main() { 
  var c2d = document.getElementById("acanvas").getContext("2d"); 
  example_space(c2d); 
} 
function enter(c, dx, dy, sx, sy) { 
  c.save(); 
  c.translate(dx,dy); 
  c.scale(sx,sy); 
} 
function leave(c, fs, ss) { 
  c.restore(); 
  c.fillStyle = fs; 
  c.strokeStyle = ss; 
  c.fill(); 
  c.stroke(); 
} 
function leave_plus(c, lw, fs, ss) { 
  c.restore(); 
  c.fillStyle = fs; 
  c.strokeStyle = ss; 
  c.lineWidth = lw; 
  c.fill(); 
  c.stroke(); 
} 
function castelo(c) { 
  c.strokeStyle = "#00B4E9"; 
  c.lineWidth = 0.01; 
  enter(c, 0.1,0.15, 0.5, 0.45); 
  letraT1(c); 
  leave_plus(c, 0, "#211F22", "#211F22"); 
} 
function example_space(c) { 
  enter(c, 20,20, 400,505); 
  castelo(c); 
  leave(c, c.fillStyle, c.strokeStyle); 
}

HTML代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<script src="novaversao.js"> 
</script> 
</head> 
<body onload="main();"> 
<canvas id="acanvas" width="1028" height="1028" /> 
</body> 
</html>

问题分析与调整方案 #

我帮你排查了几个核心问题，调整后就能让曲线和工具里的效果一致：

1. 修复路径绘制逻辑

原代码里的letraT1函数，在绘制贝塞尔曲线后又调用了moveTo(0.376, 0.32)，这会把路径的当前点强行移回起点，相当于直接丢弃了刚刚绘制的曲线路径，导致最终渲染不出曲线。必须删掉这行多余的moveTo。

另外，如果你只是要还原工具里的那条开放曲线，不需要调用closePath（除非你想把终点连回起点形成闭合图形）。

2. 修正坐标映射错误

你把工具里的像素坐标（比如376,32）直接缩小成了小数（0.376,0.32），之后又叠加了两次缩放：example_space里的scale(400,505)和castelo里的scale(0.5,0.45)，这会让实际绘制的曲线尺寸偏差到几乎看不见。

正确的做法是直接使用工具里的原始坐标，再通过一次缩放适配画布大小。比如工具里的坐标范围大概是x:0_453，y:0399，画布是1028x1028，我们可以设置合适的缩放比例让曲线铺满画布。

3. 调整线宽参数

原代码里leave_plus传的线宽是0，这会导致即使路径正确也看不到描边效果，要改成一个可见的数值（比如2）。

修改后的代码示例 #

调整后的JavaScript代码：

function letraT1(c2d) { 
  c2d.beginPath(); 
  // 直接使用工具里的原始坐标
  c2d.moveTo(376, 32); 
  // 贝塞尔曲线参数和工具里完全一致
  c2d.bezierCurveTo(349, 223, 426, 217, 453, 399); 
  // 如果不需要闭合曲线，就删掉closePath；如果需要闭合再保留
  // c2d.closePath(); 
} 
function main() { 
  var c2d = document.getElementById("acanvas").getContext("2d"); 
  example_space(c2d); 
} 
function enter(c, dx, dy, sx, sy) { 
  c.save(); 
  c.translate(dx,dy); 
  c.scale(sx,sy); 
} 
function leave(c, fs, ss) { 
  c.restore(); 
  c.fillStyle = fs; 
  c.strokeStyle = ss; 
  c.fill(); 
  c.stroke(); 
} 
function leave_plus(c, lw, fs, ss) { 
  c.restore(); 
  c.fillStyle = fs; 
  c.strokeStyle = ss; 
  c.lineWidth = lw; 
  c.fill(); 
  c.stroke(); 
} 
function castelo(c) { 
  c.strokeStyle = "#00B4E9"; 
  // 调整线宽为可见值
  c.lineWidth = 2; 
  // 少量位移让曲线居中，不额外缩放
  enter(c, 100, 100, 1, 1); 
  letraT1(c); 
  // 线宽设为2，确保能看到描边
  leave_plus(c, 2, "#211F22", "#211F22"); 
} 
function example_space(c) { 
  // 缩放比例设为2，让工具里的曲线放大后适配1028画布
  enter(c, 0, 0, 2, 2); 
  castelo(c); 
  leave(c, c.fillStyle, c.strokeStyle); 
}

这样调整后，曲线的形状、位置就会和你在Canvature工具里设计的完全一致了。

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