Javascript：在画布上绘制矩形在IE上不起作用

debugcn 发表于 Dev

阿洛索

我有一个Web应用程序，您可以在画布上绘制一个矩形。我使用两个画布元素：一个用于绘制时的预览，另一个用于精确地放置在另一个下，以进行绘制。

我的问题是，在Internet Explorer中，canvas2.width = canvas2.width不会清除canvas2的内容，这是必需的，因为每次鼠标移动都会再次绘制矩形。我也尝试过context2.clearRect(0,0,canvas2.width,canvas2.height)，但是，预览矩形根本无法绘制。在http://jsfiddle.net/Y389a/2/上试用

HTML：

<canvas id="canvas" width="600" height="400"></canvas>
<canvas id="canvas2" width="600" height="400" onmouseup="return drawLine()" onmousedown="return startLine()"></canvas>

CSS：

#canvas, #canvas2 {
    position:absolute;
    left:0px;
    top:0px;
    border-width:1px;
    border-style:solid;
    border-color:#666666;
    cursor:default !important;
}

Javascript：

var x; var xStart;
var y; var yStart;
var clicked = false;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");

context.strokeStyle = "black";
context.lineCap = "round";

canvas2.addEventListener('mousemove', function (evt) {
    var rect = canvas2.getBoundingClientRect();
    x = evt.clientX - rect.left;
    y = evt.clientY - rect.top;
    if (clicked) {
        canvas2.width = canvas2.width;
        context2.rect(xStart, yStart, x - xStart, y - yStart);
        context2.stroke();
    }
}, false);

function startLine() {
    context.beginPath();
    xStart = x; yStart = y;
    clicked = true;
}

function drawLine() {
    clicked = false;
    context.rect(xStart, yStart, x - xStart, y - yStart);
    context.stroke();
}

预览

品牌

问题

您正在绘制带有context2.rect路径命令的矩形。

路径命令“记住”的画布，直到一个新的context2.beginPath发

因此，当您执行操作时，您以前的所有区域都将被记住并重新绘制 context2.stroke

使固定

只需将context2.beginPath放在mousemove事件处理程序中：http : //jsfiddle.net/m1erickson/A8ge6/

canvas2.addEventListener("mousedown",startLine);
canvas2.addEventListener("mouseup",drawLine);
    canvas2.addEventListener('mousemove', function (evt) {
        var rect = canvas2.getBoundingClientRect();
        x = evt.clientX - rect.left;
        y = evt.clientY - rect.top;
        if (clicked) {
            canvas2.width = canvas2.width;
            console.log(xStart);

            // add beginPath so previous context2.rect's are dismissed
            context2.beginPath();

            context2.rect(xStart, yStart, x - xStart, y - yStart);
            context2.stroke();
        }
    }, false);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。