繪制上下浮動的字體主要思想為先繪制好需要的字體，每隔一定的時間將畫布清空，然后再將字體位置改變再繪制上去 如此循環即可。

(function(window) {
var flowLogo = function(logo, x, font) {
this.logo = logo;
this.x = x;
this.font = font || "25px Verdana";
}
flowLogo.prototype.flow = function(start, min, max, increment, time, container) {
var logo = this.logo;
container.font = this.font;
var x = this.x;
var logoWidth = container.measureText(logo).width;
container.strokeStyle = "white";
var forward = true;
var changeInterval = setInterval(function() {
container.clearRect(x, 0, logoWidth, max + 10);
container.strokeText(logo, x, start, logoWidth, 20);
if (forward) {
start += increment;
} else {
start -= increment;
}
if (start < min || start > max) {
forward = !forward;
}
}, time);
storage.changeInterval = changeInterval;
}
window.flowLogo = flowLogo;
})(window);

使用方式：

var logo = new flowLogo(text, left);
logo.flow(40, 40, 60, 2, 150, t);

轉載于:https://www.cnblogs.com/cmlblog/p/7663186.html

總結

以上是生活随笔為你收集整理的html5 canvas 绘制上下浮动的字体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。