收藏
回答

canvas画网格为什么显示不完整?

各位大佬九敏啊~~~

这个网格没有占满这个手机的页面,哪怕绘制30行也只显示15行

drawGrid(){
      const query = wx.createSelectorQuery()
      query.select('#myCanvas').node().exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')


        // 1. 设置网格大小
        var girdSize = 10;
        // 2. 获取Canvas的width、height
        var CanvasWidth = ctx.canvas.width;
        var CanvasHeight = ctx.canvas.height;
        // 3. 采用遍历的方式,绘画x轴的线条
        var xLineTotals = Math.floor(CanvasHeight / girdSize); // 计算需要绘画的x轴条数


        xLineTotals = 30
        for (var i = 0; i < xLineTotals; i++) {
          ctx.beginPath(); // 开启路径,设置不同的样式
          ctx.moveTo(0, girdSize * i - 0.5); // -0.5是为了解决像素模糊问题
          ctx.lineTo(CanvasWidth, girdSize * i - 0.5);
          ctx.strokeStyle = "#ccc"// 设置每个线条的颜色
          ctx.stroke();
        }
        // 4.采用遍历的方式,绘画y轴的线条
        var yLineTotals = Math.floor(CanvasWidth / girdSize); // 计算需要绘画y轴的条数
        yLineTotals = 30
        for (var j = 0; j < yLineTotals; j++) {
          ctx.beginPath(); // 开启路径,设置不同的样式
          ctx.moveTo(girdSize * j, 0);
          ctx.lineTo(girdSize * j, CanvasHeight);
          ctx.strokeStyle = "#ccc"// 设置每个线条的颜色
          ctx.stroke();
        }
      })

    },

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