h5线性渐变的几种引申

最新推荐文章于 2022-09-02 09:42:25 发布

原创最新推荐文章于 2022-09-02 09:42:25 发布 · 842 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

32 篇文章

订阅专栏

博客介绍了在线性渐变中使用随机数设置颜色的方法。addColorStop(,)里第一个数值（0 - 1取值）可用随机数表示，第二个值（string类型）能用rgb、#16进制数、英文单词表示所需颜色，以此实现渐变色使用随机颜色。

线性渐变中，addColorStop(,)中的第一个数值（0-1取值），可以用随机数表示，第二个值（string类型），可以用rgb，#16进制数，英文单词表示所需颜色。

可以使用随机数的方法来对渐变色使用随机颜色。具体写法：

var gard=context.createLinearGradient(0,-r,0,r);
	gard.addColorStop(0,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
	gard.addColorStop(0.2,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
	gard.addColorStop(0.3,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
	gard.addColorStop(0.4,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
	gard.addColorStop(0.5,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
	gard.addColorStop(0.6,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
	gard.addColorStop(0.7,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
	gard.addColorStop(0.8,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
	gard.addColorStop(1,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
	context.strokeStyle = gard;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas width="800px" height="800px" id="canvas"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
			var grd = context.createLinearGradient(0,0,500,0);
			grd.addColorStop(0,'rgb(0,0,0)');
			grd.addColorStop(0.1,'#f00');
			grd.addColorStop(0.2,'#0f0');
			grd.addColorStop(0.3,'#00f');
			grd.addColorStop(0.4,'#635');
			grd.addColorStop(Math.random(),'#777');
			grd.addColorStop(Math.random(),'#884');
			grd.addColorStop(Math.random(),'#423');
			grd.addColorStop(Math.random(),'#fff');
			grd.addColorStop(Math.random(),'#abc');
			grd.addColorStop(1,'rgb(255,255,255)');
			
			
			
			
			context.fillStyle = grd;
			context.fillRect(0,0,500,200);
			
		</script>
	</body>
</html>

。