×

在Canvas里可以用createLinearGradient()来创建一个渐变色线性对象

作者:andy0012020.04.30来源:Web前端之家浏览:4846评论:0
微信公众号

微信公众号

 在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>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/canvas892083940823048.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

  • 访客

    可以详细解释一下吗...

  • 访客

    厉害了...

  • sasa

    谢谢,刚好遇到,解决了。...

  • steven

    现在不是都在搞windows11了吗?...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2