canvas实现图片旋转

canvas的上下文context有个旋转方法

let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d');
ctx.rotate(degree)

参数degree是弧度制, 例如30°转换成30*Math.PI/180
ctx坐标系原点(0,0)在左上方, 坐标方向是y↓→x, rotate之后顺时针旋转, 画图的方式也会跟着旋转, 以顺时针旋转90°为例:
旋转之前画图方式先左后右, 先上后下

weuyquey.jpg

旋转之后先上后下, 先右后左

zzzzz.jpg

为了使图完整的还在ctx里面, 坐标变成(0, -height), 这样图片就实现了顺时针旋转90°