微信小程序 canvas 备忘

万少

发布于 2025-02-11 14:13:28

8100

代码可运行

文章被收录于专栏：万少的技术分享

运行总次数：0

代码可运行

发现前两年用的小程序的canvas api，目前在小程序中都发生了很大的更新，导致都无法直接使用了。故写下这个笔记记录

基本使用

wxml

type 类型为 2d 或者 webgl id 必须提供

<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';

        // ==========================
      });
  },
});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-02-11，如有侵权请联系 cloudcommunity@tencent.com 删除

数组