HTML5/JavaScript的画布文本梯度效应

Question

是否有一个梯度适用于使用HTML5/的JavaScript只画布内文本的方法吗？

<canvas id="myCanvas"> <p>Hello World!</p> </canvas>

Answer 1

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
</canvas> 

<script> 

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 

ctx.font = "20px Georgia"; 
ctx.fillText("Hello World!", 10, 50); 

ctx.font = "30px Verdana"; 
// Create gradient 
var gradient = ctx.createLinearGradient(0, 0, c.width, 0); 
gradient.addColorStop("0", "magenta"); 
gradient.addColorStop("0.5", "blue"); 
gradient.addColorStop("1.0", "red"); 
// Fill with gradient 
ctx.fillStyle = gradient; 
ctx.fillText("Hello World!", 10, 90); 

</script> 

Answer 2

尝试使用css。

p{ 
font-size: 72px; 
background: -webkit-linear-gradient(#eee, #333); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
    }