canvas绘制圆形问题
发布于 6 年前 作者 zengguiying 5417 次浏览 来自 问答

在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;

}

回到顶部