发现前两年用的小程序的canvas api，目前在小程序中都发生了很大的更新，导致都无法直接使用了。
故写下这个笔记记录
基本使用
wxml
type 类型 为
2d或者webglid 必须提供
<canvas type="2d" id="myCanvas"></canvas>
javascript
Page({ onLoad() { // 1 获取界面上的节点信息 返回一个 SelectorQuery 对象实例 const query = wx.createSelectorQuery(); query // 2 在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息 .select('#myCanvas') // 3 获取节点的相关信息。需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery .fields({ node: true, size: true }) // 4 执行所有的请求。请求结果按请求次序构成数组 .exec((res) => { // 5 获取画布节点 const canvas = res[0].node; // 6 获取画布对象 const ctx = canvas.getContext('2d'); // 7 定起点 ctx.moveTo(0, 0); // 8 终点 ctx.lineTo(100, 100); // 9 描边 ctx.stroke(); }); }, });
画图片
javascript
Page({ onLoad() { // 1 获取界面上的节点信息 返回一个 SelectorQuery 对象实例 const query = wx.createSelectorQuery(); query // 2 在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息 .select('#myCanvas') // 3 获取节点的相关信息。需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery .fields({ node: true, size: true }) // 4 执行所有的请求。请求结果按请求次序构成数组 .exec((res) => { // ========================== // 1 获取画布节点 const canvas = res[0].node; // 2 获取画布对象 const ctx = canvas.getContext('2d'); // 3 创建图片 const image = canvas.createImage(); // 4 监听图片下载 image.onload = function () { // 5 开始描绘图片 ctx.drawImage(image, 0, 0, canvas.width, canvas.height); }; // 6 绘图 image.src = '../../images/1.jpg'; // ========================== }); }, });
