Question

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var rw = 1560;
var rh = 2080;
var cw = "null";
var lw = "null";
var lh = "null";
var fh = "null";
var drag = false;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;
var image = new Image();
image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg"
image.onload = function(e) {
    ctx.canvas.width = image.width;
    ctx.canvas.height = image.height;
    c.width = image.width;
    c.height = image.height;
    ctx.save();
    if(rw) {
        c.width = rh;
        c.height = rw;
        ctx.canvas.width = rh;
        ctx.canvas.height = rw;
        ctx.translate(rh, 0);
        ctx.rotate((90 * Math.PI) / 180);
        ctx.drawImage(image,0,0,rw,rh);
        ctx.save();
    }
    else if(lw) {
        c.width = lh;
        c.height = lw;
        ctx.canvas.width = lh;
        ctx.canvas.height = lw;
        ctx.translate(lw-lh, lw);
        ctx.rotate((-90 * Math.PI) / 180);
        ctx.translate(0,-(lw-lh));
        ctx.drawImage(image,0,0,lw,lh);
        ctx.save();
    }
    else if(fh) {
        var maxsize = image.width;
        var w = maxsize;
        var ratio = (image.width / w);
        var h = (image.height / ratio);
        c.width = w;
        c.height = h;
        ctx.canvas.width = w;
        ctx.canvas.height = h;
        ctx.translate(w, h);
        ctx.rotate(Math.PI);
        ctx.drawImage(image,0,0,w,h);
        ctx.save();
    }
    else {
        ctx.canvas.width = image.width;
        ctx.canvas.height = image.height;
        c.width = image.width;
        c.height = image.height;
        ctx.drawImage(image, 0, 0);
        ctx.save();
    }
 ctx.rect(200, 200, 550, 500);
 ctx.strokeStyle = "green";
 ctx.lineWidth = "5";
 ctx.stroke();
};

function drawrect() {
    $(c).on('mousedown', function(e) {
        last_mousex = parseInt((image.width / c.scrollWidth) * e.offsetX);
        last_mousey = parseInt((image.height / c.scrollHeight) * e.offsetY);
        rx = last_mousex;
        ry = last_mousey;
        mousedown = true;
    });
    $(c).on('mouseup', function(e) {
        last_mousex = parseInt((image.width / c.scrollWidth) * e.offsetX);
        last_mousey = parseInt((image.height / c.scrollHeight) * e.offsetY);
        mousedown = false;
        if(!mousedown) {
            redraw(last_mousex, last_mousey, ctx);
        }
    });
    $(c).on('mousemove', function(e) {
        mousex = parseInt((image.width / c.scrollWidth) * e.offsetX);
        mousey = parseInt((image.height / c.scrollHeight) * e.offsetY);
        if(mousedown) {
            var width = mousex-last_mousex;
            var height = mousey-last_mousey;
        }
    });
}
    
function redraw(tox, toy, ctx) {
    ctx.beginPath();
    ctx.restore();
    ctx.rect(rx, ry, tox - rx, toy - ry);
    ctx.strokeStyle = "black";
    ctx.lineWidth = "3";
    ctx.stroke();
    ctx.closePath();
    xMi = rx;
    yMi = ry;
    xMa = tox - rx;
    yMa = toy - ry;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" style="width:100%; height:80%; margin: 0; padding: 0;"></canvas>
<button type="button" id="drawrect" onclick="drawrect()" class="btn btn-default" style="float:left; margin-top: 20px;">Draw
<span class="glyphicon glyphicon-edit"> </span></button>

旋转：90（向右旋转），180（向右旋转），-90（向左旋转）。

使用画布，添加了绘制矩形功能，该功能在使用鼠标事件x和y协调时在画布上绘制矩形，但是无法在旋转的画布上绘制，它可以正确地沿原始图像方向绘制。

Answer 1

问题是您使用 .translate（）和 .rotate（）方法转换了画布。尽管该图形仍然有效-只是在可见区域之外。

要解决此问题，您需要将转换重置为身份矩阵。

只需插入：

ctx.setTransform(1, 0, 0, 1, 0, 0);

onload回调函数的结尾。

旋转后无法在图像上绘制，而是在原始画布方向上绘制

1 个答案: