发现前两年用的小程序的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';
// ==========================
});
},
});
