javascript - 在画布中放置 clearRect()(带有文本动画)
问题描述
我是 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);
}
这是小提琴
帮助我获得完美的动画。提前致谢!
解决方案
我无法从您的代码中获得太多收益,最终重构了所有代码。
希望这会让您朝着正确的方向前进
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>
应该很清楚,让我知道是否有任何让您感到困惑的地方
推荐阅读
- javascript - 通过 React 使用 useState 和 onClick 更改背景图像
- c# - 剃刀页面。路由问题。重定向到另一个页面
- javascript - 对于具有多个会话/房间且每个都使用定时事件的多人游戏来说,正确的设置是什么
- linux - 我的 Linux 中安装了这么多 Python3 包(WSL - Ubuntu)
- python - Python中有没有办法创建用户名和密码菜单,其中用户名和密码通过.txt文件中的信息进行验证?
- ansible - ansible.builtin.copy:: 如何复制多个文件
- html - xampp localhost 没有按原样打开文件
- node.js - node.js - 如果 SQL 字符串中存在表名,则使用插入语句中的正则表达式检索表名
- javascript - 如何将变量从弹出窗口传递到仅使用 JS 打开它的窗口
- json - 如何从 media_share_url 获取 Instagram 帖子的 URL?