微信小程序-Canvas

微信小程序的canvas单独整理一篇

创建Canvas

支持绑定事件，点击触发事件。

<canvas style='height:{{height}}px;width:{{height}}px' canvas-id="myCanvas" 
	bindtouchstart="start" bindtouchmove='move' bindtouchend='end'>
</canvas>

js里要使用下面的句子获取canvas对象

const ctx = wx.createCanvasContext('myCanvas')

Canvas绘图

canvas是个画板供我们在给定区域draw图片或执行操作。
我用到了绘图和连线这两部分，绘图方法如下

	//drawImage(imageResource, dx, dy)
	//drawImage(imageResource, dx, dy, dWidth, dHeight)
	//drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 
    /*参数
    string imageResource
    所要绘制的图片资源
    number sx
    源图像的矩形选择框的左上角 x 坐标
    number sy
    源图像的矩形选择框的左上角 y 坐标
    number sWidth
    源图像的矩形选择框的宽度
    number sHeight
    源图像的矩形选择框的高度
    number dx
    图像的左上角在目标 canvas 上 x 轴的位置
    number dy
    图像的左上角在目标 canvas 上 y 轴的位置
    number dWidth
    在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放
    number dHeight
    在目标画布上绘制图像的高度，允许对绘制的图像进行缩放*/
    ctx.drawImage("/floor1.png",1000,220,600,600,0,0,350,400)

画个图就很好理解了

连线的方法在文档里非常详细了，也非常简单，我用到的也不多。

	ctx.drawImage(posurl, this.data.posx+nx-25, this.data.posy+ny-25, 50, 50)
    var that = this
    ctx.moveTo(aa+nx, bb+nx)
    ctx.lineTo(app.endVertexx+nx, app.endVertexy+nx)
    ctx.stroke()
    ctx.draw()

结合其他组件

可以在canvas上面放带cover的组件，比如实现一个三层商场地图切换，全屏显示地图，按地图上的按钮进行切换楼层地图。

<view class="mapPart">
    <canvas  canvas-id="myCanvas"></canvas>
    <cover-view class="chooseFloor">
      <button class="chooseBtn" bindtap="changeFloor1">F1</button>
      <button class="chooseBtn" bindtap="changeFloor2">F2</button>
      <button class="chooseBtn" bindtap="changeFloor3">F3</button>
    </cover-view>
  </view>