- 在.xml文件中添加cavans组件:
<canvas style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;" canvas-id="mycanvas" class="ca">ca</canvas>
- 在按钮点击事件下准备画图
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表示从头开始画
})
}
})
},
- drawImage(image, dx, dy) 在画布指定位置绘制原图
dx/dy:表示从画布的那个坐标开始绘制
等于(0,0)时:
等于(20,20)时
- drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
dx/dy:表示从画布的那个坐标开始绘制
dw, dh:表示从画布指定一个区域,把原图填充到这个区域上
设置为跟图像大小一样时,即在画布中指定一个跟图像一样大小的区域,把原图填充上去
减少点高度填充效果:(所有图片特征都可以看到,只不过由于画布小,填充完后有点变形)
- 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,使得填充后变形