各位大佬九敏啊~~~
这个网格没有占满这个手机的页面,哪怕绘制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();
}
})
},