微信小程序获取Canvas实例-新版Api

原创
2021/10/12 16:45
阅读数 1.7K

一、wxml

重点要指定type

  <canvas style="width: {{showInfo.width}}px;height: {{showInfo.height}}px;left:{{showInfo.left}}px;top:{{showInfo.top}}px;"
  bindtouchstart="canvasStart"  bindtouchmove="canvasMove" bindtouchend="canvasEnd"
id="myCanvas" type="2d"
  ></canvas>

二、js

          //canvas初始化
          const query = wx.createSelectorQuery();
          query.select('#myCanvas').fields({
            node: true,
            size: true,
            id: true
          }).exec(res => {
            console.info(res);
            canvas = res[0].node;
            ctx = canvas.getContext('2d');
            ctx.rect(0, 0, 100, 100);
            ctx.fill();
          });

 

三、修改Cavnas的宽度高度处理

       canvas = res[0].node;
            //设置canvas的宽度高度
            const dpr = wx.getSystemInfoSync().pixelRatio;
            canvas.width = showInfo.width * dpr;
            canvas.height = showInfo.height * dpr;
            ctx = canvas.getContext('2d');
            ctx.scale(dpr, dpr);

            setTimeout(() => {
              ctx.rect(0, 0, 100, 100);
              ctx.fill();
            }, 100);

 

四、加载网络图片绘制

      var img=canvas.createImage();
      img.onload=function(){
        ctx.drawImage(img,0,0,showInfo.width,showInfo.height);
      }
      img.src=scrawUrl;//网路图片地址

更多:

 微信小程序音频处理audio 使用整理

 2021年4月小程序登录、用户信息相关接口调整处理

 wx.openDocument()微信小程序打开word文件不能转发/编辑 问题

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部