小程序API（1.5）利用scale() 、translate()和rotate()函数实现对图形的缩放、平移和旋转

<!--pages/index.wxml-->
<view class='box'>
  <view class='title'>变形</view>
  <view class='style01'>
    <canvas canvas-id='myCanvas'></canvas>
  </view>
  <view class='style02'>
    <button type='primary' bindtap='drawRect'>绘图</button>
    <button type='primary' bindtap='scale'>放大</button>
    <button type='primary' bindtap='translate'>移动</button>
    <button type='primary' bindtap='rotate'>旋转</button>
  </view>
</view>

 

/* pages/index.wxss */

.style01 {
  width: 100%;
}

.style02 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;/*对齐方式各个按钮之间间距相等*/
}

canvas {
  border: 1px solid springgreen;
  width: 100%;
  height: 200px;
}

button {
  width: 23%;
  margin: 10px 0px;
}

 

// pages/index.js
Page({
  onReady: function() {//生命周期函数
    this.ctx = wx.createCanvasContext('myCanvas', this)  //创建绘图上下文
  },
  drawRect: function() {
    var ctx = this.ctx;
    ctx.rect(0, 0, 50, 50) //创建一个矩形路径，坐标原点0,0，水平方向50，垂直方向50
    ctx.stroke()  //画出当前路径的边框。默认颜色色为黑色
    ctx.draw(true)  //刷新屏幕后绘图（参数为true，表示保留以前画布图形）
  },
  scale: function() {
    this.ctx.scale(2, 2)  //缩放图形，水平方向和垂直方向的放大比例都是2，放大1倍
    this.drawRect()//绘制图形，保留以前图形
  },

  translate: function() {    
    this.ctx.translate(20, 20)  //移动图形，设置绘图的坐标原点水平方向和垂直方向都移动20
    this.drawRect()
  },
  rotate: function() {
    this.ctx.rotate(30 * Math.PI / 180)  //旋转图形，坐标原点旋转了PI/6，也就是沿着坐标原点顺时针旋转30度
    this.drawRect()
  }
})

缩放图形函数scale(scaleWidth, scaleHeight)

　　用于缩放图形，参数scaleWidth 和 scaleHeight分别表示沿宽度和高度方向的缩放比例。

平移图形函数translate(x, y)

　　通过变换当前坐标系原点 (0, 0) 实现平移图形。默认的坐标系原点为页面左上角，参数x、y分别表示水平和竖直方向坐标平移量。

旋转图形函数rotate(rotate)

　　用于实现以原点为中心顺时针旋转当前坐标轴，参数rotate表示旋转的角度 。