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