创建一个画布

canvas 标签默认宽度300px、高度150px ; 同一页面中的 id 不可重复

<canvas type="2d" id="myCanvas"></canvas>

直接使用css设置画布的大小会导致画布按比例缩放你设置的值。（css只是设置canvas在屏幕的显示大小）也就是说如果直接在css改变大小的话，画布里面的东西会变形😬 像这样<canvas type="2d" id="myCanvas" style="height: 500px; width: 300px;"></canvas> 当我直接绘制一个100*100的正方形的时候，它显示了一个长方形

屏幕截图 2021-11-24 172058.png

那我们就试一下网上说的要直接在属性里面设置，像这样<canvas type="2d" id="myCanvas" width="300" height="500"></canvas>，但是它在微信开发者工具上一点作用的没有，简称《无事花生》

最后暂时的解决方法是这样用css设置改变画布大小，然后它不是缩放了吗，那我们就重新在js里面设置canvas.width="300"; canvas.height="500"; 就可以恢复正常了

那我们就继续讲一下怎么绘制这个正方形吧

绘制方块

创建画布

<canvas type="2d" id="myCanvas" style="height: 500px; width: 300px;">
</canvas>

js开始绘画，之前不是说id是唯一的嘛，因为是根据id获取canvas元素，微信小程序无法使用document，我们需要使用wx.createSelectorQuery()来代替

 const query = wx.createSelectorQuery()
   query.select('#myCanvas')
     .fields({ node: true, size: true })
     .exec((res) => {
       const canvas = res[0].node
       canvas.width="300";
       canvas.height="500";
       // getContext() 方法返回一个用于在画布上绘图的环境。
       const ctx = canvas.getContext('2d')
       🎈 先设置样式再绘画
       // fillRect 绘制方块： x,y,w,h 默认颜色黑色
       // 设置填充颜色
       // ctx.fillStyle = 'yellow';
       
       // 创建渐变颜色
       var c =ctx.createLinearGradient(0,200,200,0);
       c.addColorStop(0,"yellow");
       c.addColorStop(1,"red");
       // 填充渐变颜色
       ctx.fillStyle=c;
       
       🎈 canvas 是一个二维网格，canvas 的左上角坐标为 (0,0)
       // 在画布上绘制 100x100 的正方形，从左上角开始 (0,0)
       ctx.fillRect(0, 0, 100, 100);
       
       // strokeRect 绘制带边框的方块 , 默认边框大小1px
       // 设置边框宽度
       ctx.lineWidth = 10;
       // 设置边框颜色
       ctx.strokeStyle = 'red'
       // 设置边框角样式
       // lineJoin: miter(直角，默认)、round（圆角）、bevel（斜角）
       ctx.lineJoin = 'round';
       ctx.strokeRect(105, 105, 100, 100);
     })

最后就是这样啦

感人！我可以在微信开发者工具上改变canvas宽高不变形了😭

创建一个画布

绘制方块