canvas 两点之间如何画弧

首先，我们需明确一点，如果只知道两个点的话是无法画弧的

canvas 画弧，需要半径r，圆心o(x,y)，开始的角度startDeg，结束的角度endDeg

做了一个画弧度的小需求，顺便回顾了下三角函数，所以在此记录一下。

简单介绍一下我的那个小需求吧

大概是这样，知道a和b，需要画出图中绿色的弧

要画的弧必然不能超出边，所以判断圆心o应该不是在a这条边上就是在b的延长边上

如图所示，有两种情况：

1. a < b，推测圆心o应该是在a这条边上；

2. a > b，推测圆心o应该在b的延长边上；

画个图看看

看到这里，先回顾一下三角函数的计算

正弦(sin) 对边 / 最大边，即 sinA = a / c

余弦(cos) 邻边 / 最大边，即 cosA = b / c

正切(tan) 对边 / 邻边，即 tanA = a / b

余切(cot) 邻边 / 对边，即 cotA = b / a

js中计算三角函数和反三角函数是这样：

let sinA = Math.sin(A * Math.PI / 180)
let cosA = Math.cos(A * Math.PI / 180)
let tanA = Math.tan(A * Math.PI / 180)


let asinA = Math.round(Math.asin(sinA) * 180 / Math.PI)
let acosA = Math.round(Math.acos(cosA) * 180 / Math.PI)
let atanA = Math.round(Math.atan(tanA) * 180 / Math.PI)

canvas中画弧线：arc(圆心o，半径r，开始角度，结束角度，顺时针/逆时针)

这样，就很清晰明了，就能画出我们想要的弧度了，以左侧弧度为例，代码如下：

function getArcAttribute() {

   let a, b
   let c = Math.sqrt(a ** 2 + b ** 2)
   let B = Math.round(Math.asin(b/c) * 180 / Math.PI)
   let A = Math.round(Math.asin(a/c) * 180 / Math.PI)
   
   // 求半径r
   let r = c / 2 / Math.sin(A * Math.PI / 180)
   if (a > b) {
      r = c / 2 / Math.sin(B * Math.PI / 180)
   }

   // 求圆心o(x,y)
   let x = r, y = b
   if (a > b) {
     x = a
     y = r
   }

   let startDeg = Math.PI
   let endDeg = Math.PI + (2*A) * Math.PI / 180
   if (a > b) {
     startDeg = Math.PI + (90-2*B) * Math.PI / 180
     endDeg = 3/2 * Math.PI
   }
   return { r, x, y, startDeg, endDeg }
}

const canvas = document.createElement('canvas') as HTMLCanvasElement
const cxt = fadeinCanvas.getContext('2d') as CanvasRenderingContext2D;
cxt.beginPath()
cxt.moveTo(0, b)
const {r, x, y, startDeg, endDeg} = getArcAttribute()
cxt.arc(x, y, r, startDeg, endDeg, false)
cxt.strokeStyle = '#6DD400'
cxt.stroke();

canvas 两点之间如何画弧

猜你喜欢