canvas以中心点进行旋转

54 阅读1分钟

canvas的旋转不同于css的,canvas的旋转中心在左上角,css在中心点,同时canvas没有类似于css的属性(transform-origin)

canvas 对应坐标(x,y) 对应宽高w、h

// 移动到中心点
ctx.translate(x+w/2, y+h/2);

// 旋转90°

ctx.rotate((Math.PI / 180) * 90);

// 移动回来
ctx.translate(-(x+w/2), -(y+h/2));