小编Ran*_*iru的帖子

如何在没有 ctx.bezierCurveTo 的情况下使用本机 Javascript 代码绘制平滑曲线?

我需要使用本机 Javascript 绘制并获取每个步骤的贝塞尔曲线的坐标,而不需要 ctx.bezierCurveTo 方法。

我尝试了下面的方法,但它不能正常工作。这里我附上了我的代码和输出曲线。

const accuracy = 0.01; let temp = 4;

 function draw(event) {
      if (!isDrawing) { return; }
      points.push({ x: event.clientX, y: event.clientY });    
      let count = 0;
      if(points.length === temp) {
      ctx.beginPath();
      ctx.moveTo(points[points.length - 4].x, points[points.length - 4].y)
      for (let i = 0; i <= 1; i += accuracy) {
        const p = bezier2(i, points[points.length - 4], points[points.length - 3] , 
        points[points.length - 2], points[points.length-1]);
        ctx.lineTo(p.x,p.y)
      }
     temp += 3
     ctx.stroke();
     ctx.closePath();
    }
  }

function …
Run Code Online (Sandbox Code Playgroud)

javascript bezier html5-canvas cubic-bezier

5
推荐指数
1
解决办法
629
查看次数

标签 统计

bezier ×1

cubic-bezier ×1

html5-canvas ×1

javascript ×1