Question

我已经写了这段代码

ctx.font = "25px Open Sans";
ctx.fillStyle = "white";
ctx.fillText(continue_msg, width/2-ctx.measureText(continue_msg).width/2, height/2.2);

我想知道它是否有可能创建一个彩虹文本，它可以顺畅地将颜色从r改为b再回到r并重复？

Answer 1

您可以使用HSL颜色格式填充文字

HSL可让您专注于填充的色相（色调==颜色），并通过R，G，B颜色范围进行颜色更改。

您可以使用HSL指定填充：ctx.fillStyle='hsl(255,100%,50%)'。 HSL中的第一个值是色调，您可以使用0到255之间的整数来改变色调。

以下是示例代码和演示，通过R，G，B再次将文本色调设置为动画：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.font='25px Verdana';

var hue=0;
var direction=1;

requestAnimationFrame(animate);

function animate(time){
  ctx.fillStyle='black';
  ctx.fillRect(0,0,cw,ch);
  ctx.fillStyle='hsl('+hue+',100%,50%)';
  ctx.fillText('Use the Hue!',50,75);    
  requestAnimationFrame(animate);
  hue+=direction;
  if(hue>255){direction*=-1;hue=255;}
  if(hue<0){direction*=-1;hue=0;}
}

<canvas id="canvas" width=300 height=300></canvas>

是否可以在画布上制作彩虹文字？

1 个答案: