维信小程序图片旋转

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

wxml

 

wxss:

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

js:

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

原图:
维信小程序图片旋转_第1张图片

图片旋转90

维信小程序图片旋转_第2张图片

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

维信小程序图片旋转_第3张图片

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

维信小程序图片旋转_第4张图片

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)
}

你可能感兴趣的