32 canvas渐变

最新推荐文章于 2023-05-24 14:32:14 发布

丨Anna丨

最新推荐文章于 2023-05-24 14:32:14 发布

阅读量230

点赞数

分类专栏： # canvas 前端重拾文章标签： canvas

本文链接：https://blog.csdn.net/u014331138/article/details/109359056

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

canvas

14 篇文章 0 订阅

订阅专栏

32 canvas渐变

1 线性渐变

语法

	canvas渐变（线性渐变）
		createLinearGradient(x1, y1, x2, y2)
				表示渐变的起点 (x1,y1) 与终点 (x2,y2)
					
		gradient.addColorStop(position, color)
				gradient :createLinearGradient的返回值
				addColorStop 方法接受 2 个参数，
					position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。
									例如，0.5 表示颜色会出现在正中间。
					color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）

示例

	<head>
		<meta charset="UTF-8">
		<title>16_线性渐变</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				var gradient =  ctx.createLinearGradient(0, 0, 200, 200);
				gradient.addColorStop(0,"green");
				gradient.addColorStop(0.5,"yellow");
				gradient.addColorStop(0.7,"pink");
				gradient.addColorStop(1,"red");
				ctx.fillStyle=gradient;
				ctx.fillRect(0,0,300,300);
			}
		</script>
	</body>

效果

结论

与canvas使用图片一样ctx.createLinearGradient(0, 0, 200, 200)的返回值，作为ctx.fillStyle的参数。然后使用矩形进行填充。

2 径向渐变

语法

	canvas渐变（径向渐变）	
		createRadialGradient(x1, y1, r1, x2, y2, r2)
			前三个参数则定义另一个以(x1,y1) 为原点，半径为 r1 的圆，
			后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

示例

	<head>
		<meta charset="UTF-8">
		<title>17_径向渐变</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				var gradient =  ctx.createRadialGradient(150, 150, 20,150,150,100);
				gradient.addColorStop(0,"red");
				gradient.addColorStop(0.5,"yellow");
				gradient.addColorStop(0.7,"pink");
				gradient.addColorStop(1,"#BBAAFF");
				ctx.fillStyle=gradient;
				ctx.fillRect(0,0,300,300);
			}
		</script>
	</body>

效果