如何用javascript绘制卡拉OK文本？

Question

我想用javascript显示一些文字并将其突出显示为卡拉OK - 即在一段时间后，要突出显示其他符号。如果我想让它足够平滑（即部分突出显示一个符号），我该怎么做以及如何做？我应该使用HTML5画布吗？不知道该怎么做。

Answer 1

这是使用通过符号翻译的渐变的一种方式：

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var gradient=ctx.createLinearGradient(0,0,30,0);
gradient.addColorStop(0.00,'blue');
gradient.addColorStop(0.50,'red');
gradient.addColorStop(1.00,'blue');

ctx.font='36px verdana';
ctx.fillStyle=gradient;

var text='Sing along with Mitch';
var offset=0;
var offsetChange=1;
var textWidth=100;
var textWidth=ctx.measureText(text).width;
var nextTime=0;
var delay=16*3;

requestAnimationFrame(animate);

function animate(time){
  if(offset<textWidth){requestAnimationFrame(animate);}
  if(time<nextTime){return;}
  ctx.fillStyle='black';
  ctx.fillRect(0,0,cw,ch);
  ctx.fillStyle=gradient;
  ctx.translate(offset,0);
  ctx.fillText(text,-offset,50);
  ctx.translate(-offset,0);
  offset+=offsetChange;
}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red;}

＆＃13;

<canvas id="canvas" width=500 height=200></canvas>

＆＃13;

＆＃13;

＆＃13;