使用Canvas实现渐变效果-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<canvas id="c2" width="500" height="400">
		您的浏览器版本太低，请升级！
	</canvas>

	<script>
		var c2=document.getElementById('c2');
		var ctx=c2.getContext("2d");
		var g=ctx.createLinearGradient(0,0,500,0);
		g.addColorStop(0,'#F00');
		g.addColorStop(0.5,'#FF0');
		g.addColorStop(1,"green");
		ctx.fillStyle=g;
		ctx.fillRect(0,0,350,20);

		var str="123456";
		ctx.font="30px SimHei";
		ctx.textBaseline="top";
		ctx.fillText(str,200,50);

		//垂直渐变对象
		var g1=ctx.createLinearGradient(0,0,0,400);
		g1.addColorStop(0,'#F00');
		g1.addColorStop(1,'#FFF');
		ctx.strokeStyle=g1;
		ctx.strokeRect(0,0,20,400);

		//斜渐变对象
		var g2=ctx.createLinearGradient(0,0,500,400);
		g2.addColorStop(0,'blue');
		g2.addColorStop(1,'#F00');
		ctx.fillStyle=g2;
		ctx.fillRect(100,100,300,200);
	</script>
</body>
</html>