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

最新推荐文章于 2024-05-30 01:51:11 发布

powderhose

最新推荐文章于 2024-05-30 01:51:11 发布

阅读量7.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： canvas

本文链接：https://blog.youkuaiyun.com/powderhose/article/details/74455941

微信小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在canvas中使用rem和rpx单位，以实现手机屏幕宽度的自适应。通过调整canvas的尺寸和单位转换，确保在不同设备上展示效果一致。涉及到的关键技术包括wxss样式设置、js动态计算和canvas绘图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//获取屏幕的宽度
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);
  }
})