Javascript：在畫布上繪制矩形在 IE 上不起作用

Question

我有一個 Web 應用程序，您可以在其中在畫布上繪制一個矩形。 我使用兩個畫布元素：一個用於在繪圖時進行預覽，另一個用於繪制它。

我canvas2.width = canvas2.width的問題是，在 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();
}

預覽

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() 。

這不會向主路徑添加任何子路徑，而是直接繪制到畫布上。 如果您稍后需要向路徑添加其他形狀，請記住以與您在startLine()中startLine()的類似的方式為rect()使用beginPath()為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 ..Enjoy Coding