直播app开发搭建，uniapp实现canvas画倾斜的圆

首先在uni的canvas里面是没有画椭圆的函数的，想要实现椭圆有很多种方法

可以使用lineTo不停的改变很小的间距来画但是十分耗费性能

使用arc画圆，使用scale进行变形

可以使用arcTo 贝塞尔曲线等进行椭圆的绘制，主要是要找到控制点，相对麻烦一些

那么我使用的就是第二种方法，主要是因为比较简单，虽然也有一定的弊端比如进行缩放的时候他的位置会移动，再比如画出的曲线线条宽度不一致，但是无伤大雅

下面就是这篇文章的主要内容椭圆是画出来了，但是我们有倾斜的需求该怎么办呢？就要使用到translate和rotate，具体的都在代码里写了

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

那么这个的重点就是顺序一定一定要按照上面的顺序来，如果先scale 你会发现不管你怎么旋转都是没有用的，如果不先translate去定位原点，旋转和缩放就会脱离轨迹

以上就是直播app开发搭建，uniapp实现canvas画倾斜的圆，更多内容欢迎关注之后的文章