維信小程序圖片旋轉

使用畫布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)
}