canvas层级和绘制线上tupian

小程序中canvas 画图

  • canvas 标签层级过高
    • canvs 绘制在线的图片

canvas 标签层级过高

在用canvas 标签层级太高了,只要在canvas上添加

// css样式
position:fixed;
top:0;
left:1000px;//这里的大小要远远大于屏幕的宽带,这样就不在能见到的屏幕中看到canvas标签,就能解决了canvas层级的问题;
width:300px;
height:400px;//这里的宽高都是要和你绘制的js中canvas的大小是一样的,要不就会出现显示不全的问题

canvs 绘制在线的图片

实现的原理就是首先要把图片先保存到本地,成功之后在去进行canvas的绘画;上代码解决问题

//url  就是图片的一个网络地址
//在全局中要生命一个that=this
drawCanvasImage: function (url) {
    if (typeof url === 'string') {
      // 小程序获取图片信息API
      wx.getImageInfo({
        src: url,
        success: function (res) {
          console.log(res)
          that.setData({
          //这里就用一个变量来存储图片的本地地址
            myPageImg: res.path
          });
          //然后在进行绘制操作
          that.drawCanvas();
        },
        fail(err) {
          console.log(err)
        }
      })
    }
  }

你可能感兴趣的:(小程序,绘制在线图片)