js实现长按录制视频按钮外部转圈倒计时10秒的效果

css：

	#canvas {
				background-color: #eee;
				border-radius: 50%;
			}

			#record-btn {
				margin-top: 20px;
				padding: 10px;
				border-radius: 5px;
				background-color: #f00;
				color: #fff;
				border: none;
				font-size: 16px;
			}

HTML：

		<canvas id="canvas" width="100" height="100"></canvas>
		<button id="record-btn">长按录制</button>

js：

<script>
			let canvas = document.getElementById('canvas');
			let context = canvas.getContext('2d');
			let recordBtn = document.getElementById('record-btn');
			let timer; // 用于记录计时器
			let count = 10; // 计数器，初始值为10秒

			// 绘制外部圆环
			function drawOuterCircle() {
				context.lineWidth = 10;
				context.strokeStyle = '#ccc';
				context.beginPath();
				context.arc(50, 50, 40, 0, Math.PI * 2);
				context.stroke();
			}

			// 绘制内部圆环
			function drawInnerCircle() {
				context.lineWidth = 8;
				context.strokeStyle = '#f00';
				context.lineCap = 'round';
				context.beginPath();
				context.arc(50, 50, 40, -Math.PI / 2, (-Math.PI / 2) + (count / 10) * Math.PI * 2);
				context.stroke();
			}

			// 清除canvas画布
			function clear() {
				context.clearRect(0, 0, canvas.width, canvas.height);
			}

			// 计时器函数
			function startTimer() {
				timer = setTimeout(function() {
					if (count > 0) {
						clear();
						count--;
						drawOuterCircle();
						drawInnerCircle();
						startTimer();
					} else {
						stopTimer();
						recordBtn.innerText = '开始录制';
						// 录制结束后的操作
					}
				}, 1000);
			}

			// 停止计时器函数
			function stopTimer() {
				clearTimeout(timer);
				count = 10;
				clear();
				drawOuterCircle();
			}


			let isRecording = false; // 用于记录是否正在录制

			recordBtn.addEventListener('mousedown', function() {
				if (!isRecording) {
					isRecording = true;
					recordBtn.innerText = '松开结束';
					clear();
					drawOuterCircle();
					startTimer();
					// 开始录制的操作
				}
			});

			recordBtn.addEventListener('mouseup', function() {
				if (isRecording) {
					isRecording = false;
					stopTimer();
					recordBtn.innerText = '开始录制';
					// 结束录制的操作
				}
			});


			drawOuterCircle();
		</script>

现在，当长按录制按钮时，canvas上会绘制一个外部圆环，内部圆环逐渐显示，并倒计时10秒。当用户松开按钮时，计时器停止，内部圆环消失，canvas上只剩下外部圆环。