轻松理解canvas线性渐变和径向渐变

最新推荐文章于 2024-08-08 00:00:00 发布

前端分享会

最新推荐文章于 2024-08-08 00:00:00 发布

阅读量422

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_43905830/article/details/105254707

版权

本文介绍了HTML5 Canvas中线性渐变和径向渐变的原理及使用方法。线性渐变通过createLinearGradient指定起始和结束点，并用addColorStop设置颜色变化。径向渐变则利用createRadialGradient定义起点和终点圆的坐标及半径，创建从内向外的辐射效果。

摘要由CSDN通过智能技术生成

线性渐变:线性渐变是指从开始地点到结束地点，颜色呈直线的徐徐变化的效果
createLinearGradient(x,y,x1,y1);渐变的开始地点(x, y)，结束地点(x1, y1)指定后，返回线性渐变对象CanvasGradient。然后我们通过addColorStop方法，offset为0的地方为开始地点的颜色，offset为1的则为结束地点的颜色。另外，很明显的，x=x1并且y=y1的时候，不会有渐变效果出现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	 <canvas id="cnavas" width="800" height="600" style="background: burlywood;">
	 </canvas>
	 <script type="text/javascript">
	 	var cnavas=document.getElementById("cnavas");
	 	var c=cnavas.getContext(

最低0.47元/天解锁文章

前端分享会

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
轻松理解canvas线性渐变和径向渐变

线性渐变:线性渐变是指从开始地点到结束地点，颜色呈直线的徐徐变化的效果createLinearGradient(x,y,x1,y1);渐变的开始地点(x, y)，结束地点(x1, y1)指定后，返回线性渐变对象CanvasGradient。然后我们通过addColorStop方法，offset为0的地方为开始地点的颜色，offset为1的则为结束地点的颜色。另外，很明显的，x=x1并且y=y1的...
复制链接

扫一扫

专栏目录