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

Question

我有一个 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();
}

Preview

Answer 1

问题

您正在使用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);

Answer 2

如果你只需要画一个矩形，你可以使用这个版本：

context2.strokeRect(xStart, yStart, x - xStart, y - yStart);

而不是rect() + stroke()。

这不会向主路径添加任何子路径，而是直接绘制到画布上。如果您以后需要将其他形状添加到路径中，请记住使用 beginPath() 表示 rect()，就像您在 startLine() 中所做的一样 rect() 添加子路径。

Answer 3

代码没有问题，IE 9 也没有问题，你错过的是一个 l'le 概念，

addEventListener() 对 IE 不起作用，您必须使用 attachEvent() 才能让您的代码在 IE 中运行

//For your code to work in IE
if (!canvas2.addEventListener) {
canvas2.attachEvent("onclick", CanvasFunction);
}
//for rest of the Browser
else {
canvas2.addEventListener("click", CanvasFunction, false);
}

function CanvasFunction(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();
    }
}

玩画布，记住 IE 不支持 addEventListners ..享受编码