我是 HTML5 canvas 的新手，制作了一個(gè)簡(jiǎn)單的文本動(dòng)畫(huà)。但是，當(dāng)動(dòng)畫(huà)正在進(jìn)行時(shí)，我無(wú)法清除以前繪制的文本。文字看起來(lái)很拖沓。請(qǐng)找到下面的代碼鏈接以獲得清晰的圖片。單擊動(dòng)畫(huà)按鈕即可觀看動(dòng)畫(huà)。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}這是小提琴幫助我獲得完美的動(dòng)畫(huà)。提前致謝！
在畫(huà)布中放置clearRect()（帶有文本動(dòng)畫(huà)）
桃花長(zhǎng)相依
2023-10-30 20:16:15
