18、cavans绘图

1. 在.xml文件中添加cavans组件：

<canvas style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;" canvas-id="mycanvas" class="ca">ca</canvas>

1. 在按钮点击事件下准备画图

   BtnNewImg: function () {

    let that = this

    let ctx = wx.createCanvasContext('mycanvas')//有id获得上下文

    let code = "../../image/me/2.png"//要绘制的图片

    wx.getImageInfo({//用来获取图像的尺寸大小

      src: code,

      success: res0 => {

        that.setData({ //设置cavans画布的大小

          canvasWidth: res0.width,

          canvasHeight: res0.height

        });

        //原图大小

        let ImagWidth = res0.width

        let ImagHeight = res0.height

        ctx.drawImage(code, 0, 0, ImagWidth, ImagHeight)//描述图片

        ctx.draw(false, () => {   //画成功的回调函数，false表示从头开始画

 

        })

      }

    })

  },

 

1. drawImage(image, dx, dy) 在画布指定位置绘制原图

dx/dy:表示从画布的那个坐标开始绘制

等于（0,0）时：

等于（20,20）时

1. drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图

dx/dy:表示从画布的那个坐标开始绘制

dw, dh:表示从画布指定一个区域，把原图填充到这个区域上

设置为跟图像大小一样时，即在画布中指定一个跟图像一样大小的区域，把原图填充上去

减少点高度填充效果：（所有图片特征都可以看到，只不过由于画布小，填充完后有点变形）

1. drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部

把原图片的这个区域：sx, sy, sw, sh填充到画布的这个区域上dx, dy, dw, dh

例子1：把原图的这个区域0, 0, ImagWidth, ImagHeight，即整个图片填充到画布的0, 0, ImagWidth, ImagHeight这个区域上，效果跟ctx.drawImage(code, 0, 0, ImagWidth, ImagHeight)//描述图片

一样

       例子2：所有特征都可以看到，只不过目标区域缩小20，使得填充后变形