Javascript：在画布上绘制矩形在IE上不工作 [英] Javascript: Drawing rectangle on canvas doesn't work on IE

问题描述

我有一个Web应用程序，您可以在画布上绘制一个矩形。我使用两个画布元素：一个用于预览而绘制，另一个正好放在另一个下绘制它。

I have a web application where you can draw a rectangle on a canvas. I use two canvas elements: one for the preview while drawing and another one laying exactly under the other one for drawing it.

我的问题是，在Internet Explorer中， canvas2.width = canvas2.width 不清除canvas2的内容，这是必要的，因为对于每个mousemove矩形再次绘制。我也尝试了 context2.clearRect（0,0，canvas2.width，canvas2.height），但是，然而，然后，预览矩形不绘制。请在 http://jsfiddle.net/Y389a/2/ 上试用

The problem I have is that in Internet Explorer, canvas2.width = canvas2.width doesn't clear the content of canvas2, which is necessary because for every mousemove the rectangle gets drawn again. I also tried context2.clearRect(0,0,canvas2.width,canvas2.height), but, however, then the preview rectangle doesn't get drawn at all. Try it out on 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：

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

推荐答案

/ strong>

Problem

您正在使用 context2.rect 绘制矩形，这是一个路径命令。

You are drawing rectangles with context2.rect which is a path command.

路径命令由画布记住，直到发出新的 context2.beginPath 为止

Path commands are "remembered" by the canvas until a new context2.beginPath is issued

因此，当您执行 context2.stroke

时，所有先前的rect都会被记住并重新绘制修复

Fix

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

Just put context2.beginPath in your mousemove event handler: 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);

这篇关于Javascript：在画布上绘制矩形在IE上不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！