我是HTML5画布的新手,并制作了简单的文本动画。
但是,在进行动画处理时,我无法清除以前绘制的文本。文本看起来很拖拉。请查看下面的代码链接以获得清晰的图片。单击“动画”按钮以查看动画。
function drawTextOnCanvas(
can,
ctx,
text,
font,
backColor,
textColor,
maxWidth,
startingx,
startingy,
spacing
) {
var linesArray = getLines(ctx, text, maxWidth);
ctx.save();
for (var i = 0; i < linesArray.length; i++) {
drawTextBG(
can,
ctx,
linesArray[i],
font,
backColor,
textColor,
startingx,
startingy
);
// ctx.fillText(linesArray[i], startingx, startingy);
/* startingx += spacing; */
startingy += spacing; // Remove this if you want everthing in line
}
ctx.restore();
}
function getLines(ctx, text, maxWidth) {
// Enter maxWidth depending on the resolution and canvas dimensions
var words = text.split(" ");
var lines = [];
var currentLine = words[0];
ctx.font = "54px bolder Arial"
for (var i = 1; i < words.length; i++) {
var word = words[i];
var width = ctx.measureText(currentLine + " " + word).width;
if (width < maxWidth) {
currentLine += " " + word;
} else {
lines.push(currentLine);
currentLine = word;
}
}
lines.push(currentLine);
return lines;
}
function drawTextBG(can,ctx, txt, font, backColor, textColor, x, y) {
/// set font
console.log(txt)
x= -300;
let speed = 15;
let distance = 0;
var startTime = new Date().getTime();
var interval = setInterval(function() {
if (new Date().getTime() - startTime > 1000) {
clearInterval(interval);
}
if (distance >= 600) {
distance = 0;
// clearInterval(interval);
x = canv.width / 2;
}
distance += speed;
animateText(can,ctx, txt, font, backColor, textColor, x + distance, y);
}, 33);
}
function animateText(can,ctx, txt, font, backColor, textColor, x, y) {
ctx.font = font;
/// draw text from top - makes life easier at the moment
ctx.textBaseline = "top";
/// color for background
ctx.fillStyle = backColor;
/// get width of text
var width = ctx.measureText(txt).width;
/// draw background rect assuming height of font
ctx.fillRect(x, y, width, parseInt(font, 10));
/// text color
ctx.fillStyle = textColor;
/// draw text on top
ctx.fillText(txt, x, y);
}
这是 Fiddle
帮助我获得完美的动画。预先感谢!
答案 0 :(得分:0)
我无法充分利用您的代码,最终重构了所有代码。
希望这能给您正确的方向
class Text {
constructor(txt, font, backColor, textColor, x, y, speed) {
this.txt = txt;
this.font = font;
this.backColor = backColor;
this.textColor = textColor;
this.initX = x;
this.x = x;
this.y = y;
this.speed = speed;
}
draw(ctx) {
ctx.beginPath()
ctx.font = this.font;
ctx.textBaseline = "top";
ctx.fillStyle = this.backColor;
var width = ctx.measureText(this.txt).width;
ctx.fillRect(this.x, this.y, width, parseInt(this.font, 10));
ctx.fillStyle = this.textColor;
ctx.fillText(this.txt, this.x, this.y);
this.x -= this.speed ;
if (this.x < -width)
this.x = this.initX
}
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
initX = canvas.width
dogs = new Text("Dogs are cute animals", "20px Arial", "#f50", "#000", initX, 20, 1)
cats = new Text("Cats say Miauu", "22px Arial", "#000", "#0F0", initX, 50, 0.5)
hello = new Text("HELLO", "12px Arial", "#F00", "#FF0", initX, 80, 3)
setInterval(draw, 20)
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
dogs.draw(ctx)
cats.draw(ctx)
hello.draw(ctx)
}
<canvas id="canvas" width=220 height=100></canvas>
应该很清楚,如果有什么让您感到困惑的话,请告诉我