应该在画布上制作线条曲线

Question

我有尺寸width = 100px和height = 150px

的画布

我需要使用函数bezierCurveTo()

制作曲线

html的

<canvas id = "canvas" width = "100" height = "150"></canvas>

.TS

var canvas = <HTMLCanvasElement>document.getElementById('canvas');
var ctx = canvas.getContext('2d');

  ctx.strokeStyle = 'white';
  ctx.beginPath();
  ctx.lineWidth=3;
  ctx.moveTo(40,0);
  ctx.bezierCurveTo(); //what dimensions to be filled?
  ctx.lineTo(100,150)   
  ctx.stroke();

在rdr中的函数bezierCurveTo()中要填充什么尺寸，以便在提供的屏幕截图中准确显示曲线。

隐藏屏幕截图中的虚线。

Answer 1

Heyaaaa

免责声明：在

之前，我从未画过普通的2D画布

我查找了bezierCurveTo()方法，它有6个需要的参数。

然后我为你构建了这个CodePen。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.lineWidth=1;
//ctx.moveTo(40,0);
ctx.bezierCurveTo(30, 0, -70, 75, 100, 150);  //what dimensions to be filled?
//ctx.lineTo(100,150)   
ctx.stroke();

让我知道它是如何工作的