维信小程序图片旋转

使用画布canvas解决这个问题，h5的canvas同理
图片旋转这种东西总是晕，写下了便于我以后参考。

wxml：

 <canvas  canvas-id="canvas"  ></canvas>

wxss:

canvas {
  width: 320px;
  height: 240px;
}

js:

Page({
 onLoad: function(options) {
    drowImage("image.png")
 }
})
 

原图：

图片旋转90


function drowImage(path) {
    var canvasContext = wx.createCanvasContext('canvas')
    var width = 320
    var height = 240
    canvasContext.translate(height, 0)//原点向
    canvasContext.rotate(90 * Math.PI / 180)
    canvasContext.drawImage(path, 0, 0, width, height)
    canvasContext.draw(false)
}



图片旋转270


function drowImage(path) {
    var canvasContext = wx.createCanvasContext('canvas')
    var width = 320
    var height = 240canvasContext.translate(0, width)
    canvasContext.rotate(270 * Math.PI / 180)
    canvasContext.drawImage(path, 0, 0, width, height)
    canvasContext.draw(false)
}

图片旋转180


function drowImage(path) {
    var canvasContext = wx.createCanvasContext('canvas')
    var width = 320
    var height = 240
    canvasContext.translate(width,height)
    canvasContext.rotate(180 * Math.PI / 180)
    canvasContext.drawImage(path, 0, 0,  width, height)
}