canvas 单位问题 类似rem和rpx自适应手机屏幕宽度

//获取屏幕的宽度var  clientWidth = wx.getSystemInfoSync().screenWidth;;//根据设计图中的canvas画布的占比进行设置var canvasWidth = Math.floor(clientWidth*200/720);再用数据驱动把宽高添加到page页面的canvas的style属性中

原文地址: https://segmentfault.com/a/1190000003502824

wx.getSystemInfoSync()
 获得的是一个包含屏幕尺寸信息的对象

数据驱动:

index.wxml
<!--index.wxml--><canvas style="width: {{width}}; height:{{width}};" class="canvas1" canvas-id="firstCanvas" /><!--当使用绝对定位时,文档流后边的 canvas的显示阶层高于前边的canvas--><canvas style="width: {{width}}; height: {{width}};" class="canvas2" canvas-id="secondCanvas" />
index.wxss
/**index.wxss**/page{  background-color: #777777;}.canvas1, .canvas2{  position: absolute;}.canvas1{  background-color: #cccccc;  box-sizing: border-box;}
index.js

//index.js
//获取应用实例
var app = getApp()
var H = 750;
var W = 750;
function dawLine(context){
  for(var i = 0; i < 20; i++){
    //线条宽度
    context.setLineWidth(1);
    //线条颜色（支持颜色编码与rgb()函数）
    context.setStrokeStyle("rgb(205,40,40)");
    context.moveTo(0, i*25);
    context.lineTo(750, i*25);
  }
  for (var i = 0; i < 20; i++) {
    //线条宽度
    context.setLineWidth(1);
    //线条颜色（支持颜色编码与rgb()函数）
    context.setStrokeStyle("rgb(205,40,40)");
    context.moveTo(i * 25, 0);
    context.lineTo(i * 25, 750);
  }
  context.stroke();
  context.draw();
}
function snake(context){
  context.setFillStyle("#00ff00");
  context.setLineWidth(25);
  // 画一个矩形,第一个和第二个参数代表坐标,第三个参数表示宽度,第四个参数表示高度
  context.fillRect(0, 0, 25, 200);
  context.stroke();
  context.draw();
}
function move(context){
  var count = 0;
  // 蛇的长度
  var h = 200;
  setInterval(function (){
    // 判断临界条件,蛇头走出画布
    if(count < 200){
      context.setFillStyle("#00ff00");
      context.setLineWidth(25);
      // 画一个矩形,第一个和第二个参数代表坐标,第三个参数表示宽度,第四个参数表示高度
      context.fillRect(0, count, 25, 200);
      context.stroke();
      context.draw();
    }
    else{


    }
    count += 25;
  }, 1000);
}
Page({  data: {    width: '',    height:''  },  canvasIdErrorCallback: function(e){    console.error(e.detail.errMsg);  },  onReady: function(e){    console.log(wx.getSystemInfoSync().screenWidth)    // 获取屏幕的宽度    var clidentWidth = wx.getSystemInfoSync().screenWidth;    console.log(clidentWidth);    // 根据设计图中的canvas画布的占比进行设置    var canvasWidth = Math.floor(clidentWidth);    // 使用wx.createCanvasContext获取上下文context    var context = wx.createCanvasContext('firstCanvas');    var context2 = wx.createCanvasContext('secondCanvas');    this.setData({      width: canvasWidth + 'px',      height: canvasWidth + 'px',    });    // context.setStrokeStyle("#00ff00");    // context.setLineWidth(5);    // // 画一个矩形,第一个和第二个参数代表坐标,第三个参数表示宽度,第四个参数表示高度    // context.rect(0, 0, 200, 200);    // context.stroke();    // context.setStrokeStyle("#ff0000");    // context.setLineWidth(2);    // context.moveTo(160, 100);    // context.arc(100, 100, 60, 0, 2*Math.PI, true);    // context,moveTo(140, 100);    // context.arc(100, 100, 40, 0, Math.PI, false);    // context.moveTo(85, 80);    // context.arc(80, 80, 5, 0, 2*Math.PI, true);    // context.moveTo(125, 80);    // context.arc(120, 80, 5, 0, 2*Math.PI, true)    // context.stroke();    // context.draw();    dawLine(context);    // snake(context2);    move(context2);  }})