uniapp implements canvas to draw tilted circles

Boy, I really worked hard to draw this oval.

First of all, there is no function for drawing ellipses in uni's canvas. There are many ways to realize ellipses.

1. You can use lineTo to continuously change the small spacing to draw, but it is very performance consuming.
2. Use arc to draw a circle and scale to deform it.
3. You can use arcTo, Bezier curve, etc. to draw ellipses. The main thing is to find the control points, which is relatively troublesome.

Then I use the second method, mainly because it is relatively simple. Although it also has certain disadvantages, such as its position will move when zooming, and the width of the drawn curve lines is inconsistent, but it is harmless.

The following is the main content of this article. The ellipse is drawn, but what should we do if we need to tilt it? You need to use translate and rotate. The details are written in the code.

	// 可以参考下思路 主要还是跟据场景来定
			drawSkimLine(ctx, x,y，radius) {
				ctx.lineWidth = 2;
				ctx.strokeStyle = "red";
				ctx.beginPath();
				ctx.translate(x,y) //将画布的原点定位到 椭圆的圆心
				ctx.rotate(30 * Math.PI / 180); //椭圆倾斜的角度
				ctx.scale(0.3, 1);//因为arc画的是圆 是通过scale变形变成的椭圆
				ctx.arc(0, 0, radius, 0, Math.PI * 2);//画圆 注意这里前两个参数是0，0
				ctx.stroke();
				ctx.draw();


			}

The key point here is that the order must be in the order above. If you scale first, you will find that no matter how you rotate, it is useless. If you don’t translate first to locate the origin, the rotation and scaling will be off track.

If there are other better methods, please give me some advice. I just started to explore canvas, hehe, mainly to record my pitfalls.