收藏
回答

canvas绘制圆形问题

在1.3版本编译无问题,大于1.3的版本编译就会跑偏

图1是在1.3版本编译的,图2是在1.5版本编译的,代码完全一样



js

  onReady: function () {

    //创建并返回绘图上下文context对象。

    const cxt_arc = wx.createCanvasContext('canvasCircle');

    cxt_arc.setLineWidth(6);

    cxt_arc.setStrokeStyle('#eaeaea');//底边框颜色

    cxt_arc.setLineCap('round');

    cxt_arc.beginPath();

    cxt_arc.arc(100, 100, 60, 0, 2 * Math.PI, false);

    cxt_arc.stroke();

    cxt_arc.draw();

  },

wxml

  <view class="circle-box">

    <canvas class="circle" style="z-index: -99;" canvas-id="canvasCircle"></canvas>

</view>

wxss

.circle-box {

  text-align: center;

  height: 200px;

  width: 200px;

  margin: 0 auto;

  padding: 0.1rpx;

  position: relative;

}


.circle {

  position: absolute;

  left: 0;

  top: 0;

  width: 200px;

  height: 200px;

}


回答关注问题邀请回答
收藏
登录 后发表内容