Question

我试图在我的图表上绘制一条长的（实际上非常长的）贝塞尔线。当悬停在线上时，它应该变得更厚。我遇到了一个问题。有时，线条的曲率会有所不同，具体取决于Chrome中的lineWidth。

代码exapmle

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.setTransform(1, 0, 0, 1, -3700, -50)
const gap = 32;
const line = [
  {x: 3830, y: 95}, 
  {x: 3830 + gap, y: 95}, 
  {x: 12600 - gap, y: 25895}, 
  {x: 12600, y: 25895}
];

// Draw bezier out of box
function drawLine(p1, a1, a2, p2, width, color) {
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.beginPath();
  ctx.moveTo(p1.x,p1.y);
  ctx.bezierCurveTo(a1.x, a1.y, a2.x, a2.y, p2.x, p2.y);
  ctx.stroke();
}

drawLine.apply(null, line.concat([3, '#f00']));
drawLine.apply(null, line.concat([1, '#00f']));

JSFiddle

在Safari中它看起来很好，但Chrome和FF绘制相同的线条，但点数不同。

看起来像曲线取决于lineWidth。

可能有人知道如何解决这个问题？

Javascript bezierCurveTo（）根据lineWidth绘制不同的曲率

0 个答案: