小编Kar*_*ngh的帖子

使用javascript在画布上使用贝塞尔曲线近似椭圆弧时出现重大误差

我正在尝试将svg路径转换为javascript中的画布,但是将svg路径椭圆弧映射到画布路径真的很难.其中一种方法是使用多个贝塞尔曲线进行近似.

我已经成功地实现了具有贝塞尔曲线的椭圆弧的近似,但是近似不是非常准确.

我的代码:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
ctx.strokeWidth = 2;
ctx.strokeStyle = "#000000";
function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max)
}

function svgAngle(ux, uy, vx, vy ) {
  var dot = ux*vx + uy*vy;
  var len = Math.sqrt(ux*ux + uy*uy) * Math.sqrt(vx*vx + vy*vy);

  var ang = Math.acos( clamp(dot / len,-1,1) );
  if ( (ux*vy - uy*vx) < 0)
    ang = -ang;
  return ang;
}

function …
Run Code Online (Sandbox Code Playgroud)

javascript svg

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

标签 统计

javascript ×1

svg ×1