Css 旋转后鼠标移动不准确

我有两块画布，当我在第一块画布上画东西时，我希望能够画出完全相同的东西，但在第二块画布上像镜子一样翻转

因此，我尝试使用CSS转换，但它使鼠标在第二个画布上的移动不准确。 这是我的代码：

---

有办法解决这个问题吗

我创建了一个在第二个画布上翻转鼠标移动的函数。在这里，我传递鼠标点，点击的地方和画布的宽度

function flipHorizontal(ponto, width) {
    var x_linha = (width- ponto.x);
    var y_linha = (ponto.y);

    var flipped = {
        x: x_linha,
        y: y_linha
    };

    return flipped;
}

---

不要使用css缩放，除非你掌握它，奇怪的结果会随之而来

在您的例子中，最简单的方法是删除任何css，然后手动将左半部复制到右半部

因此，仅使用一个画布，仅在左侧部分绘制，每次完成绘制时，调用此函数以镜像左侧部分：

// copy the the left part of the canvas on its right part
function mirrorContext(context) {
    var canvas = context.canvas;
    var width  = canvas.width;
    var height = canvas.height;
    // preserve context
    context.save();
    // translate to middle of right part of canvas
    context.translate(3*width/4, height/2); 
    // flip x direction
    context.scale(-1, 1);
    // draw left part on right part, reversed
    context.drawImage(canvas                       
/* take left part of canvas... */  ,0, 0, width/2, height  
/* ... copy it on right part */   ,-width/4, -height/2, width/2, height
                       );
    // cancel any context change
    context.restore();
}

---

不准确是什么意思？在我看来很准确：点击第二张画布，鼠标不准确啊，现在我明白你的意思了：有办法解决这个问题吗？我一直在尝试，但没有成功。也就是说，我不是javascript/jquery的大师^^

// copy the the left part of the canvas on its right part
function mirrorContext(context) {
    var canvas = context.canvas;
    var width  = canvas.width;
    var height = canvas.height;
    // preserve context
    context.save();
    // translate to middle of right part of canvas
    context.translate(3*width/4, height/2); 
    // flip x direction
    context.scale(-1, 1);
    // draw left part on right part, reversed
    context.drawImage(canvas                       
/* take left part of canvas... */  ,0, 0, width/2, height  
/* ... copy it on right part */   ,-width/4, -height/2, width/2, height
                       );
    // cancel any context change
    context.restore();
}