【JavaScript】canvas画色彩轮

it表哥

已于 2024-07-15 13:45:28 修改

阅读量324

点赞数 2

文章标签： javascript 前端开发语言

于 2024-03-30 18:57:37 首次发布

本文链接：https://blog.youkuaiyun.com/zbxinsheng/article/details/137179893

版权

本文介绍了两种使用JavaScript在HTML5canvas上实现色彩轮的方法，分别是利用arc函数绘制圆形色彩渐变和直线绘制线性色彩变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、利用arc画色彩轮

function actDrawColor(id){
	var canvas = document.getElementById(id);
	var ctx = canvas.getContext('2d');
	var centerX = canvas.width / 2; //圆心x
	var centerY = canvas.height / 2; //圆心y
	var radius = Math.min(centerX, centerY); //半径
	// 设置起始和结束亮度
	var startLight = 50;
	var endLight = 100;
	var lineWidth = radius / (startLight + 1); //线段宽度

	for (let hue = 0; hue <= 360; hue++) {
		for (let l = startLight; l <= endLight; l++) {
			var color = `hsl(${hue}, 100%, ${l}%)`;
			// 使用角度计算出圆上的点坐标
			var angle = hue * Math.PI / 180;
			var x = centerX - lineWidth * (100 - l) * Math.cos(angle);
			var y = centerY - lineWidth * (100 - l) * Math.sin(angle);
			// 绘制一个点或线段（这里以绘制点为例）
			ctx.beginPath();
			ctx.fillStyle = color;
			ctx.arc(x, y, lineWidth, 0, 2 * Math.PI);
			ctx.fill();
		}
	}
}

2、利用直线画色彩轮

function lineDrawColor(id) {
	var canvas = document.getElementById(id);
	var ctx = canvas.getContext('2d');
	var centerX = canvas.width / 2; //圆心x坐标
	var centerY = canvas.height / 2; //圆心y坐标
	var radius = Math.min(centerX, centerY); //圆的半径
	var light = 50; //
	var lineWidth = radius / light; //线段宽度
	for (l = light; l <= 100; l++) {
		for (h = 0; h <= 360; h++) {
			if (l == 100) {
				console.log(h);
			}
			var angle = h * (Math.PI / 180); //角度
			var ys = (100 - l) * lineWidth * Math.sin(angle);
			var xc = (100 - l) * lineWidth * Math.cos(angle);
			var y = centerY - ys; //根据角度得出x的位置
			var x = centerX - xc; //根据角度得出y的位置
			var color = `hsl(${h}, 100%, ${l}%)`; //颜色
			ctx.beginPath();
			ctx.strokeStyle = color; // 设置线段颜色
			ctx.moveTo(x, y); // 从中心点开始
			ctx.lineTo(x + xc, y + ys); // 到计算出的点结束
			ctx.lineWidth = lineWidth; // 设置线段宽度
			ctx.stroke(); // 绘制线段
		}
	}
}
```![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6f7a571d9b934d7787fa3bef2bead8c2.png#pic_center)