微信小程序·canvas 画布基本方法

微信小程序·canvas 画布基本方法

微信小程序·canvas 画布

1】设置背景图

var select = wx.createSelectorQuery();
    select.select('#canvas').context(res => {
      var ctx = res.context
      ctx.setFillStyle("#FF0000")
      //drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) 
      ctx.drawImage('../../static/cool.jpg', 200, 150, 160, 180, 70, 60, 160, 180); //图片
      ctx.draw() //开始绘制
    }).exec()

2】保存图片

wx.canvasToTempFilePath({
      canvasId: "canvas",
      canvas: '',
     fileType: 'png', //jpg 、png
      width: 300, //指定画布区域
      height: 300, //指定画布区域
      x: 0, //指定画布区域的左上角横坐标
      y: 0, //指定画布区域的左上角纵坐标
      success(res) {
        console.log("图片地址", res.tempFilePath);
      }
    })
44 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注