HTML5学习第16篇——线性渐变和径向渐变

最新推荐文章于 2024-04-19 01:00:00 发布

水晶果冻1125

最新推荐文章于 2024-04-19 01:00:00 发布

阅读量1.2k

点赞数 1

分类专栏： # HTML5 文章标签： html5 渐变

本文链接：https://blog.csdn.net/m0_37617778/article/details/84972999

版权

HTML5 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、线性渐变

定义和用法

createLinearGradient() 方法用于创建线性渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

JavaScript 语法：

context.createLinearGradient(x0,y0,x1,y1);

参数值

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas 线性渐变</title>
	<style type="text/css">
		canvas{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<canvas width="600" height="400"></canvas>
	<script type="text/javascript">
		var c = document.querySelector('canvas');
		var ctx = c.getContext("2d");

		//创建线性渐变方案
		//参数为起始位置的横纵坐标，终点位置的横纵坐标
		var lgd = ctx.createLinearGradient(100,200,500,200);

		//渐变颜色设置(渐变方案线条中的位置，颜色) 0代表开始位置，
		//1代表结束位置，参数1只能介于0-1之间
		lgd.addColorStop(0,"red");
		lgd.addColorStop(0.5,"green");
		lgd.addColorStop(1,"blue");

		//将渐变方案给样式设置
		ctx.strokeStyle = lgd;
		ctx.moveTo(100,200);
		ctx.lineTo(500,200);
		ctx.lineWidth = 20;
		ctx.stroke();
	</script>
</body>
</html>

效果：

2、径向渐变

定义和用法

createLinearGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

JavaScript 语法：

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数值

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cavans 径向渐变</title>
	<style type="text/css">
		canvas{
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas width="600" height="400"></canvas>
	<script>
		var c = document.querySelector('canvas');
		var ctx = c.getContext("2d");

		//createLinearGradient() 方法创建放射状/圆形渐变对象。
		//createRadialGradient(x0,y0,r0,x1,y1,r1);
		//渐变的开始圆的 x 坐标,y坐标，半径，结束圆的 x 坐标,y坐标，半径
		var crg = ctx.createRadialGradient(300,200,50,300,200,100);

		crg.addColorStop(0,"red");
		crg.addColorStop(1,"yellow");

		ctx.fillStyle =  crg;

		//ctx.fillRect(50,50,300,200);
		ctx.arc(300,200,100,0,Math.PI*2);
		ctx.fill();

	</script>
</body>
</html>

效果：

水晶果冻1125

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习第16篇——线性渐变和径向渐变

1、线性渐变定义和用法createLinearGradient() 方法用于创建线性渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。 JavaScript 语法： context.createLinearGradient(x0,y0,x1,y1); 参数值 ...
复制链接

扫一扫