JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div style="display:flex;">
	<button style="background:yellow; padding:20px;">버튼</button>
	<canvas id="canvas" height="400" width="200" style="background:#000; padding:10px;"></canvas>
</div>

JavaScript

let canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
pressTimer,
interval,
barHeight = 0, // 게이지 높이
barWidth=30; // 게이지 너비
ctx.fillStyle = "red"; // 게이지 색상

$("button").mouseup(function(){ // 버튼을 떼면
	
	// 클리어
	clearTimeout(pressTimer);
	clearTimeout(interval);
	
	// 게이지 감소
	function render() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		barHeight -= 10;
		ctx.fillRect(0, canvas.height - barHeight, barWidth, barHeight);
		if (barHeight <= 0) return;
		requestAnimationFrame(render);
	}
	requestAnimationFrame(render);
	
	return false;
}).mousedown(function(){ // 버튼을 누르고 있으면
	
	if (barHeight >= canvas.height) {
		return;
	}
	
	// 게이지 증가
	pressTimer = window.setTimeout(function() {
		interval = setInterval(function() {
			barHeight += 10;
			
			setTimeout(
		    	ctx.fillRect(0, canvas.height - barHeight, barWidth, barHeight),
		    	100
		    );
			
		}, 100);
	}, 100);
	
	return false; 
});