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()中的方式类似{{1}}添加子路径

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

使用Canvas，请记住IE不支持addEventListners ..Enjoy Coding

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

3 个答案: