我有这个简单的canvas网页，允许用户使用HTML input type file. 这个想法是让用户在他们的图像上自由绘图。但是，我有一个问题。
在某些设备上，来自相机的图像以错误的方向绘制到画布上，因此我必须为用户提供一个按钮来旋转他们的图像以获得正确方向的绘图。
问题是在画布被变换和旋转以获得正确的方向后，绘图坐标似乎偏离了。例如，如果我绘制水平直线，则在图像旋转一次后得到垂直直线。我认为问题在于画布方向发生了变化。
那么如何在图像转换和旋转后纠正绘图坐标？我的代码在下面..
window.onload = init;
var canvas, ctx, file, fileURL;
var mousePressed = false;
var lastX, lastY;
function init(){
canvas = document.getElementById('myCanvas')
ctx = canvas.getContext('2d')
canvas.addEventListener('mousedown', touchstartHandler, false)
canvas.addEventListener('mousemove', touchmoveHandler, false)
canvas.addEventListener('mouseup', touchendHandler, false)
canvas.addEventListener('mouseleave', touchcancelHandler, false)
}
function touchstartHandler(e){
e.preventDefault()
mousePressed = true;
Draw(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, false);
}
function touchmoveHandler(e){
e.preventDefault()
if (mousePressed) {
Draw(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
}
}
function touchendHandler(e){
e.preventDefault() …