html5 canvas 绘制上下浮动的字体

绘制上下浮动的字体主要思想为先绘制好需要的字体，每隔一定的时间将画布清空，然后再将字体位置改变再绘制上去 如此循环即可。

(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);