线性渐变和径向渐变

李子不会理

已于 2022-08-30 15:30:45 修改

阅读量394

点赞数

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

于 2022-08-30 15:24:02 首次发布

本文链接：https://blog.csdn.net/ljj07220602/article/details/126604821

版权

前端HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用canvas，在js中绘制线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		window.onload=function(){
			// 获取画布
			var canvas=document.querySelector('canvas');
			// 获取画笔
			var context=canvas.getContext('2d');
			// 3.绘制一个线性渐变图形 
			// 3.1创建一个线性渐变对象 
			// createLinearGradient参数 0 0 400 400 
			var l=context.createLinearGradient(0,0,400,400);
			// 3.2给渐变图形填充颜色 addColorStop 参数 阈值0-1填充百分比 颜色
			l.addColorStop(0,'red');
			l.addColorStop(0.25,'blue');
			l.addColorStop(0.5,'cyan');
			l.addColorStop(0.75,'pink');
			l.addColorStop(1,'yellow');
			// 4.将渐变对象给到图形填充样式
			context.fillStyle=l;
			// 5.绘制填充图形
			context.fillRect(0,0,400,400);
		}
	</script>
</head>
<body>
	<canvas width="600px" height="600px"></canvas>
</body>
</html>

获取径向渐变则：使用createRadialGradient；

用法：
var g=context.createRadialGradient(200,200,50,200,200,200)

声明一个渐变对象前三个参数小圆心x轴开始位置 y轴开始位置半径后三个参数大圆心x轴开始位置 y轴开始位置半径（其他于线性渐变一样）

在HTML中也可以设置线性渐变和径向渐变：

线性渐变（默认上到下，或者加to 表明方向，也可以用度数表示方向用deg。）

径向渐变是从一个点向四周的颜色渐变：

李子不会理

关注

0
点赞
踩
0

收藏

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

声明一个渐变对象前三个参数小圆心x轴开始位置 y轴开始位置半径后三个参数大圆心x轴开始位置 y轴开始位置半径（其他于线性渐变一样）线性渐变（默认上到下，或者加to 表明方向，也可以用度数表示方向用deg。获取径向渐变则：使用createRadialGradient；使用canvas，在js中绘制线性渐变。.........
复制链接

扫一扫