HTML5实现彩色渐变字

方法一：利用CSS中的-webkit-gradient背景渐变属性实现，-webkit-gradient是background的一个属性值，webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] )。

.colorful{
	width: 250px;
	font-size: 20px;
	background-image: 
	-webkit-gradient( linear, left top, right top, color-stop(0, #f22), 
	color-stop(0.15, #f2f), 
	color-stop(0.3, #22f), 
	color-stop(0.45, #2ff), 
	color-stop(0.6, #2f2),
	color-stop(0.75, #2f2), 
	color-stop(0.9, #ff2), 
	color-stop(1, #f22) );
	color: transparent;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-ms-background-clip: text
}
<div class='colorful'>十步杀一人，千里不留行。</div>

效果图：

方法二：利用画布canvas实现，画布中有个createLinearGradient()创建线性渐变方法，<canvas>只能通过脚本来编写代码。

<canvas id="myCanvas" width="480" height="40">
//画布Canvas
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = 'bold 35px Brush Script MT';
        var grd = ctx.createLinearGradient(10, 10, 480, 30);
        grd.addColorStop(0, "#f22");
        grd.addColorStop(0.15, "#f2f");
        grd.addColorStop(0.3, "#22f");
        grd.addColorStop(0.45, "#2ff");
        grd.addColorStop(0.6, "#2f2");
        grd.addColorStop(0.75, "#2f2");
        grd.addColorStop(0.9, "#ff2");
        grd.addColorStop(1, "#f22");
        ctx.fillStyle = grd;
        ctx.fillText("十步杀一人，千里不留行。", 0, 30);