HTML5 - 画布：绘制文本在梯度

Question

我想写通过梯度一些文字（做一个刻度）：

我有这个至今：

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
// Create gradient 
 
var grd = ctx.createLinearGradient(0,0,500,0); 
 
grd.addColorStop(0,"red"); 
 
grd.addColorStop(0.5,"yellow"); 
 
grd.addColorStop(1,"green"); 
 
// Fill with gradient 
 
ctx.font = "30px Arial"; 
 
ctx.fillText("Hello World",10,50); 
 
ctx.fillStyle = grd; 
 
ctx.fillRect(0,0,500,100);

 
 
    
 
    <canvas id="myCanvas" width="500" height="100" style="border:1px solid #d3d3d3;"> 
 
    Your browser does not support the HTML5 canvas tag.</canvas>

我看不到文字。我怎样才能解决这个问题？

我想创建这样的：如果是从一些分数，我给生成的圈子

。

Answer 1

这里有两个问题：

• 你绘制上层建筑文本
• 您正在绘制在同一个渐变的背景和文本的背景，所以文字会出现在顶无形背景

移动文本，绘图后的矩形，并改变其颜色：

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
// Create gradient 
 
var grd = ctx.createLinearGradient(0,0,500,0); 
 
grd.addColorStop(0,"red"); 
 
grd.addColorStop(0.5,"yellow"); 
 
grd.addColorStop(1,"green"); 
 
// Fill with gradient 
 
ctx.font = "30px Arial"; 
 
ctx.fillStyle = grd; 
 
ctx.fillRect(0,0,500,100); 
 

 
ctx.fillStyle = "#000"; 
 
ctx.fillText("Hello World",10,50);

<canvas id="myCanvas" width="500" height="100" style="border:1px solid #d3d3d3;"> 
 
    Your browser does not support the HTML5 canvas tag.</canvas>

Answer 2

您可能需要设置最后文本。我可以看到你正在绘制已经绘制的文本上的填充矩形。尝试这样做，而不是：

<canvas id="myCanvas" width="500" height="100" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
// Create gradient 
var grd = ctx.createLinearGradient(0,0,500,0); 
grd.addColorStop(0,"red"); 
grd.addColorStop(0.5,"yellow"); 
grd.addColorStop(1,"green"); 
// Fill with gradient 
ctx.fillStyle = grd; 
ctx.fillRect(0,0,500,100); 
//write text with canvas methods 
c.fillStyle = '#000000'; 
c.font = "30px Arial"; 
c.fillText("Hello World",10,50); 
</script> 

您也可以考虑找了用于定位文本canvas.textAlign和canvas.textBaseline性能;