问题

Question

我有一个HTML5 Canvas，我需要向右和向左移动2个主要对象副本。右侧似乎工作正常，但左翼开始留下奇怪的绿色路径。 jSfiddle link here

这是代码。作业需要我使用各种画布形状来书写，并将其框架化为3个不同的立方体。我想我错过了广告无法弄明白的东西。任何帮助表示赞赏

var c = document.getElementById("cId");
    var ctx = c.getContext("2d");

    var cWidth = c.width;
    var cHeight = c.height;

    var xOff = 1;

    var direction = 1;

    function playAnimation() {
        ctx.clearRect(0, 0, cWidth, cHeight);

        ctx.save();
        ctx.translate(xOff, 0);
        drawName();
        ctx.restore();

        ctx.save();

        ctx.translate(-1*xOff, 0);
        drawName();
        ctx.restore();

        ctx.save();
        drawName();
        ctx.restore();

        xOff++;

        window.requestAnimationFrame(playAnimation);
    }

    function fDrawRect() {
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.rect(5, 5, 80, 60);
        ctx.fillRect(5, 5, 80, 60);
        ctx.stroke();
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.rect(85, 5, 80, 60);
        ctx.fillRect(85, 5, 80, 60);
        ctx.stroke();
        ctx.beginPath();
        ctx.fillStyle = "yellow";
        ctx.rect(165, 5, 80, 60);
        ctx.fillRect(165, 5, 80, 60);
        ctx.stroke();
    }

    function draw(x, y, xTo, yTo, color) {
        ctx.beginPath();
        ctx.lineWidth= 2;
        ctx.strokeStyle=color;
        ctx.moveTo(x,y);
        ctx.lineTo(xTo,yTo);
        ctx.stroke();

    }

    function drawName() {
        //Draw rect around
        fDrawRect();
        //L
        draw(10, 10, 10, 60, "black");
        draw(10, 60, 30, 60, "black");
        //A
        ctx.beginPath();
        ctx.arc(60, 25, 15, 1*Math.PI, 0);
        ctx.stroke();
        draw(45, 25, 45, 60, "black");
        draw(75, 25, 75, 60, "black");
        draw(45, 35, 75, 35, "black");
        //U
        ctx.beginPath();
        ctx.moveTo(90, 45);
        ctx.quadraticCurveTo(105, 75, 125, 45);
        ctx.stroke();
        draw(90, 45, 90, 10, "black");
        draw(125, 45, 125, 10, "black");
        //R
        draw(140, 10, 140, 60, "black");
        ctx.beginPath();
        ctx.arc(140, 25, 15, 1.5*Math.PI, 0.5*Math.PI);
        ctx.stroke();
        draw(140, 40, 155, 60, "black");
        //I
        draw(170, 10, 170, 60, "black");
        //S
        ctx.beginPath();
        ctx.moveTo(210, 10);
        ctx.bezierCurveTo(170, 10, 250, 60, 190, 60);
        ctx.stroke();

    }
    ctx.translate(450, 150);
    //drawName();
    playAnimation();

Answer 1

您需要清除fDrawRect功能中的画布：

    function fDrawRect() {
        ctx.clearRect(0, 0, c.width, c.height); //Clear canvas
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.rect(5, 5, 80, 60);
        ctx.fillRect(5, 5, 80, 60);
        ctx.stroke();
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.rect(85, 5, 80, 60);
        ctx.fillRect(85, 5, 80, 60);
        ctx.stroke();
        ctx.beginPath();
        ctx.fillStyle = "yellow";
        ctx.rect(165, 5, 80, 60);
        ctx.fillRect(165, 5, 80, 60);
        ctx.stroke();
    }

Answer 2

问题

当您尝试在playAnimation开头（使用ctx.clearRect(0, 0, cWidth, cHeight)）清除画布时，您不会清除画布中可见的整个区域。

证明：如果您绘制一个矩形以覆盖playAnimation中清除的区域，您会发现它不会像它应该的那样从左上角开始（{{3} }）。

它不起作用的原因是这一行，它在开始渲染之前翻译了一次上下文：

ctx.translate(450, 150);

删除后，您会看到整个可见区域已清除（fiddle）。但是，现在你不能在画布中间得到这个名字。

解决方案

解决方案是在每个playAnimation()的开头进行翻译，并在函数末尾撤消翻译（fiddle）。

当向左移动时，画布图像留下奇怪的痕迹

2 个答案:

问题

解决方案