使用canvas创建渐变文字。效果如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>渐变文字</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop('0','black');
gradient.addColorStop('0.3','green');
gradient.addColorStop('0.6','yellow');
gradient.addColorStop('1','red');
ctx.font = '40px yahei';
ctx.fillStyle = gradient
ctx.fillText('hello world', 100, 100);
</script>
</body>
</html>