css3圆心旋转-uniapp实现canvas绘制斜圆

哥们，这个椭圆我真是费了好大的劲才画出来的

首先uni的画布上没有画椭圆的功能。 实现椭圆的方法有很多种

可以使用lineTo不断改变小宽度来绘制，但是成本很高。 用圆弧画圆，用比例变换。 您可以使用 arcTo Bezier 曲线来绘制椭圆。 主要是找控制点，比较麻烦。

然后我用的是第二种方法，主要是因为它比较简单，虽然有一定的缺点，比如缩放的时候他的位置会连在一起，比如画出来的曲线腰线长短不一致，但是也无害

以下是本文的主要内容。 椭圆画好了css3圆心旋转，但是如果有倾斜的需求怎么办？就要用到translate和rotate了，具体写在代码里了

	// 可以参考下思路 主要还是跟据场景来定
			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();
			}

那么这个的重点就是顺序必须以之前的顺序为基础。 如果先缩放，你会发现无论怎么旋转css3圆心旋转，都没用。 如果不先平移定位原点，旋转和缩放就会脱离轨道。

如果还有其他更好的方法，欢迎指教。 刚刚开始探索canvas，呵呵，主要是记录一下自己的坑