gpt4 book ai didi

javascript - Canvas 图像向左移动时会留下奇怪的痕迹

转载 作者:搜寻专家 更新时间:2023-10-31 08:24:02 26 4
gpt4 key购买 nike

我有一个 HTML5 Canvas我需要将 2 个主要对象的副本左右移动。右侧似乎工作正常,但左侧开始留下奇怪的绿色痕迹。 jSfiddle link here

这是代码。作业要求我使用各种 Canvas 形状写字,并将其框成 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();

最佳答案

您需要在 fDrawRect 函数中清除 Canvas :

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

关于javascript - Canvas 图像向左移动时会留下奇怪的痕迹,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47554402/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com