canvas arc 方法在android 中显示不正常的bug - WXOPEN Club

let cxt_arc = wx.createCanvasContext('core-usage');//创建并返回绘图上下文context对象。
cxt_arc.setLineWidth(15);
cxt_arc.setStrokeStyle('#142948');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(100, 100, 90, 0.75 * Math.PI, 0.25 * Math.PI, false);

<canvas class="usage_percent" canvas-id="core-usage" binderror="canvas_err"></canvas>

.usage_percent{
  position: absolute;
  width: 260px;
  height: 260px;
  z-index: 1;
}

模拟器上的显示：正常

iOS 上显示：正常

android上显示：不正常下面是android 上的显示：

Android 设备信息：

微信版本：6.5.16

sdk 版本：1.6.4

华为荣耀 PRA-AL00

系统版本：7.0 EMui 5.0

请问这是什么问题？

li59 1楼•4 年前

这个问题，我自己算是解决了；

cxt_arc.arc(100, 100, 90, 0.75 * Math.PI, 0.25 * Math.PI, false);

我猜测，这里iOS 会按顺时针，逆时针，从开始到结束去渲染，但是android 只会按从小弧度，到大弧度，再根据顺时、逆针去渲染；

解决方案就是：

给大弧度的第二个参数加上2pi 吧。。。

cxt_arc.arc(100, 100, 90, 0.75 * Math.PI, 2.25 * Math.PI, false);

yanjing 2楼•4 年前

我们看看