如何用 javascript 绘制类似卡拉 OK 的文字？

Question

我想用 javascript 显示一些文本并像卡拉 OK 一样突出显示它 - 即一段时间后，要突出显示其他符号。如果我想让它足够平滑（即部分突出显示一个符号），我应该做什么以及如何做？我应该使用 HTML5 canvas 吗？不知道从什么开始。

Answer 1

这是使用通过符号转换的渐变的一种方法：

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;
}

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

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

如何用 javascript 绘制类似卡拉 OK 的文字？

How to draw karaoke-like text with javascript?

html

javascript

canvas

html5-canvas