代码之家 › 专栏 › 技术社区 › Aditya

在画布上绘制直线曲线时应注意什么

html5-canvas canvas javascript

4

Aditya · 技术社区 · 8 年前

我有一张尺寸画布 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();

函数中需要填写哪些维度 bezierCurveTo() 在rdr中,要在提供的屏幕截图中精确地查看曲线。

忽略屏幕截图中的虚线。

1 回复 | 直到 8 年前

1

Fraser 8 年前

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();

让我知道你的情况