我正在尝试将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)