h5线性渐变的几种引申

最新推荐文章于 2022-06-28 16:44:19 发布

S_1978P1

最新推荐文章于 2022-06-28 16:44:19 发布

阅读量745

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/S_1978P1/article/details/82151714

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

线性渐变中，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>

。

S_1978P1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5线性渐变的几种引申

线性渐变中，addColorStop(,)中的第一个数值（0-1取值），可以用随机数表示，第二个值（string类型），可以用rgb，#16进制数，英文单词表示所需颜色。可以使用随机数的方法来对渐变色使用随机颜色。具体写法：var gard=context.createLinearGradient(0,-r,0,r); gard.addColorStop(0,"rgb...
复制链接

扫一扫