用一个渐变笔触来写文本 "Big smile!"

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

您的浏览器不支持 HTML5 canvas 标签

</canvas>

<script>

  var c = document.getElementById("myCanvas");

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

  ctx.font = "30px Verdana";

  // 创建渐变

  var gradient = ctx.createLinearGradient(0, 0, c.width, 0);

  gradient.addColorStop("0", "magenta");

  gradient.addColorStop("0.5", "blue");

  gradient.addColorStop("1.0", "red");

  // 渐变填

  ctx.strokeStyle = gradient;

  ctx.strokeText("Big smile!", 10, 50);

</script>