维信小程序图片旋转

共计 917 个字符，预计需要花费 3 分钟才能阅读完成。

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