彩色渐变字体

这种css控制的样式（仅支持webkit内核浏览器）

background-image: linear-gradient(0deg, rgba(2, 210, 2, 0.5), rgba(255, 2, 2, 0.5));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

利用画布 canvas

<canvas id="myCanvas" width="200" height="30">浏览器不支持canvas标签</canvas>
<script>
    // 获取元素-创建画布
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // 创建渐变
    var grd = ctx.createLinearGradient(0, 0, 200, 0); // 渐变的方向
    grd.addColorStop(0, "rgba(2, 210, 2, 0.5)"); // 颜色1
    grd.addColorStop(1, "rgba(255, 2, 2, 0.5)"); // 颜色2

    ctx.fillStyle = grd; // 渐变颜色填充
    ctx.font = "30px Arial" // 字体设置
    ctx.fillText("彩色字体", 0, 30); // 注意起始位置和文字高度
</script>