canves中如何使用rem以及rpxcanves中参数都是像素,但是移动端,最常用的就是rem,小程序中的rpx,如果

canves中参数都是像素,但是移动端,最常用的就是rem,小程序中的rpx,如果用rem定义了canves元素的长和宽,那里面的参数怎么设置了,其实就是把rem转换成px就可以了,哈哈

该项目中的圆环中间还有一张图片圆环是用canves实现的

<view class='progress_box'>
  <canvas class="progress_bg"   canvas-id="stepBk">  </canvas> 
  <canvas class="progress_canvas"   canvas-id="step">  </canvas> 
  <view class="img_box"><image src="../../images/index/zoulu.png"></image></view>
</view>

canves的宽度,和高度用rpx设置那么画圆的时候

drawProgressbg: function (id) {
// 使用 wx.createContext 获取绘图上下文 context
var ctx = wx.createCanvasContext(id)
ctx.setLineWidth(4);// 设置圆环的宽度
ctx.setStrokeStyle('#eee'); // 设置圆环的颜色
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
var x = 80 / 750 * wx.getSystemInfoSync().windowWidth;
var y = 80 / 750 * wx.getSystemInfoSync().windowWidth;
var r = 70 / 750 * wx.getSystemInfoSync().windowWidth;
ctx.arc(x, y, r, 0, 2 * Math.PI, false);
//设置一个原点(100,100)，半径为90的圆的路径到当前路径
ctx.stroke();//对当前路径进行描边
ctx.draw();
  },

期中80就是rpx以rpx为单位,这样就能适配任何手机,圆形图片在圆环中央