我是 HTML5 canvas 的新手，制作了一個簡單的文本動畫。但是，當動畫正在進行時，我無法清除以前繪制的文本。文字看起來很拖沓。請找到下面的代碼鏈接以獲得清晰的圖片。單擊動畫按鈕即可觀看動畫。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}這是小提琴幫助我獲得完美的動畫。提前致謝！
1 回答
小怪獸愛吃肉
TA貢獻1852條經驗 獲得超1個贊
我無法從你的代碼中得到太多，最終重構了所有。
希望這能讓您走上正確的方向
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>
應該都清楚了，如果有什么讓你困惑的請告訴我
- 1 回答
- 0 關注
- 108 瀏覽
添加回答
舉報
0/150
提交
取消