HTML Canvas如何实现线性渐变效果？

最新推荐文章于 2022-03-09 09:57:50 发布

weixin_45587319

最新推荐文章于 2022-03-09 09:57:50 发布

阅读量168

点赞数

分类专栏： HTML 文章标签： html

原文链接：https://www.html.cn/qa/html5/10423.html

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

可以先使用HTML Canvas的线性渐变的函数createLinearGradient()来创建一个渐变色线性对象；然后使用addColorStop()方法定义渐变色颜色；最后将渐变颜色分配给strokeStyle或fillStyle属性进行填充，使用fillRect()等方法来绘制“已填色”的形状，如矩形，圆形，线条，文本等。

createLinearGradient() 方法创建线性的渐变对象，渐变可用于填充矩形，圆形，线条，文本等不同的颜色。

JavaScript语法：

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

参数值：

●　x0：渐变开始点的 x 坐标

●　y0：渐变开始点的 y 坐标

●　x1：渐变结束点的 x 坐标

●　y1：渐变结束点的 y 坐标

addColorStop()方法规定渐变对象中的颜色和位置。

JavaScript 语法：

gradient.addColorStop(stop,color);

参数值：

●　stop：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

●　color：在结束位置显示的CSS颜色值

示例1：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body style="text-align:center;">
		<h2>线性渐变效果</h2>
		<canvas id="myCanvas" width="350" height="180"></canvas>
		<script>
			var a = document.getElementById("myCanvas");
			var gctx = a.getContext("2d");
			//创建一个渐变色线性对象
			var clg = gctx.createLinearGradient(100, 150, 200, 120);

			//定义渐变色颜色
			clg.addColorStop(0, "yellow");
			clg.addColorStop(1, "pink");
			gctx.fillStyle = clg; //设置用于填充绘画的颜色、渐变或模式
			gctx.fillRect(80, 20, 200, 110); //绘制渐变图形
		</script>
	</body>
</html>

效果图：

示例2：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body style="text-align:center;">
		<h2>线性渐变效果</h2>
		<canvas id="myCanvas" width="350" height="180"></canvas>
		<script>
			var a = document.getElementById("myCanvas");
			var gctx = a.getContext("2d");
			//创建一个渐变色线性对象
			var lingrad = gctx.createLinearGradient(0, 0, 0, 150); 

			//定义渐变色颜色
			lingrad.addColorStop(0, '#00AB3B'); 
                        lingrad.addColorStop(0.5, '#45ec3f'); 
                        lingrad.addColorStop(0.5, '#66CC20'); 
                        lingrad.addColorStop(1, '#f3f');
			gctx.fillStyle = lingrad; //设置用于填充绘画的颜色、渐变或模式
			gctx.fillRect(110, 20, 130, 130);  //绘制渐变图形
		</script>
	</body>
</html>

效果图：