画布不绘制 IE 11

Question

我有一个画布代码来绘制签名。该代码在 chrome 和 Firefox 上运行良好，但在 IE 11 上根本无法绘制。

我的画布是：

<canvas id="signitureCanvas" style="border: 3px solid #000; cursor:crosshair; background-color:white;"></canvas>

我的代码如下：

 var canvas = document.getElementById('signitureCanvas');
    var ctx = canvas.getContext('2d');
    var canvasWidth = 200;
    var canvasLength = 120;
    canvas.width = canvasWidth;
    canvas.height = canvasLength;
    var canvasx = $(canvas).offset().left;
    var canvasy = $(canvas).offset().top;
    var last_mousex = last_mousey = 0;
    var mousex = mousey = 0;
    var mousedown = false;
    var tooltype = 'draw';

    //Mousedown
    $(canvas).on('mousedown', function (e) {
        last_mousex = mousex = parseInt(e.clientX - canvasx);
        last_mousey = mousey = parseInt(e.clientY - canvasy);
        mousedown = true;
    });

    //Mouseup
    $(canvas).on('mouseup', function (e) {
        mousedown = false;
    });

    //Mousemove
    $(canvas).on('mousemove', function (e) {
        mousex = parseInt(e.clientX - canvasx);
        mousey = parseInt(e.clientY - canvasy);
        if (mousedown) {
            ctx.beginPath();
            if (tooltype == 'draw') {
                ctx.globalCompositeOperation = 'source-over';
                ctx.strokeStyle = 'black';
                ctx.lineWidth = 3;
            } else {
                ctx.globalCompositeOperation = 'destination-out';
                ctx.lineWidth = 10;
            }
            ctx.moveTo(last_mousex, last_mousey);
            ctx.lineTo(mousex, mousey);
            ctx.lineJoin = ctx.lineCap = 'round';
            ctx.stroke();
        }
        last_mousex = mousex;
        last_mousey = mousey;
    });

    function ClearCanvas() {
        var canvas = document.getElementById('signitureCanvas');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

IE 11 特别有问题吗？

编辑：

我发现问题出在我的 iframe 上：

当高度和宽度设置为 300 时，一切正常：

 <embed id="fred"  type="application/pdf" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="@Model.FilePath" frameborder="1" scrolling="yes" height="300" width="300" />

当我将它设置为 1000 时，它将不起作用：

 <embed id="fred"  type="application/pdf" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="@Model.FilePath" frameborder="1" scrolling="yes" height="1000" width="1000" />

我相信这是偏移量的问题，但我不知道如何修复它。

有什么帮助吗？

Answer 1

想进一步了解谁可能会问：

我发现这段代码适用于所有浏览器，layerX 和 layerY 对于 firefox 浏览器是不同的：

   var canvas = document.getElementById('signitureCanvas');
var ctx = canvas.getContext('2d');
var canvasWidth = 200;
var canvasLength = 120;
canvas.width = canvasWidth;
canvas.height = canvasLength;
var x = 0;
var y = 0;

function tool_pencil() {
    var tool = this;
    this.started = false;

    // This is called when you start holding down the mouse button
    // This starts the pencil drawing
    this.mousedown = function (ev) {
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineJoin = ctx.lineCap = 'round';
        ctx.moveTo(x, y);
        tool.started = true;
    };

    // This function is called every time you move the mouse. Obviously, it only
    // draws if the tool.started state is set to true (when you are holding down
    // the mouse button)
    this.mousemove = function (ev) {
        if (tool.started) {
            ctx.lineTo(x, y);
            ctx.stroke();
        }
    };

    // This is called when you release the mouse button
    this.mouseup = function (ev) {
        if (tool.started) {
            tool.mousemove(ev);
            tool.started = false;
        }
    };
}

// The general-purpose event handler. This function just determines
// the mouse position relative to the <canvas> element
function ev_canvas(ev) {
    // Firefox
    if (ev.offsetX || ev.offsetX == 0) {
        x = ev.offsetX;
        y = ev.offsetY;
        // Opera
    } else if (ev.layerX || ev.layerX == 0) {
        x = ev.layerX;
        y = ev.layerX;
    }

    // Call the event handler of the tool
    var func = tool[ev.type];
    if (func) {
        func(ev);
    }
}

function ClearCanvas() {
    var canvas = document.getElementById('signitureCanvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}