[Vue3] Canvas 그라데이션

어쩌다보니 이런걸 만들어봄.

 

이 게시글 보고 했음.

<template>
<div>
	<div><canvas ref="colorCanvas"></canvas></div>
	<div><canvas ref="rainbowCanvas"></canvas></div>
</div>
</template>

이렇게 캔버스 두 개를 사용할 예정임.

 

<script>
import { onMounted } from 'vue';
import { ref } from '@vue/reactivity';

export default {
	name: 'View',
	setup() {
		const colorCanvas = ref(null);
		const rainbowCanvas = ref(null);
		let colorCtx = null; 

		function makeColorCanvas() {
			colorCanvas.value.style.width = '300px'
			colorCanvas.value.style.height = '300px'
			colorCtx = colorCanvas.value.getContext('2d');

			colorCtx.canvas.width = 300
			colorCtx.canvas.height = 300

			let color = 'rgba(0,0,255,1)'
			let gradientH = colorCtx.createLinearGradient(0, 0, colorCtx.canvas.width, 0);
			gradientH.addColorStop(0, '#FFFFFF');
			gradientH.addColorStop(1, color);
			colorCtx.fillStyle = gradientH;
			colorCtx.fillRect(0, 0, colorCtx.canvas.width, colorCtx.canvas.height);
			

			let gradientV = colorCtx.createLinearGradient(0, 0, 0, 300);
			gradientV.addColorStop(0, 'rgba(0,0,0,0)');
			gradientV.addColorStop(1, '#000000');
			colorCtx.fillStyle = gradientV;
			colorCtx.fillRect(0, 0, colorCtx.canvas.width, colorCtx.canvas.height);
		}

		function makeRainbowCanvas() {
			rainbowCanvas.value.style.width = '300px'
			rainbowCanvas.value.style.height = '10px'
			const rainbowCtx = rainbowCanvas.value.getContext('2d');

			rainbowCtx.canvas.width = 300
			rainbowCtx.canvas.height = 10

			let horizontal = rainbowCtx.createLinearGradient(0, 0, 300, 0);
			horizontal.addColorStop(0, "red");
			horizontal.addColorStop(0.15, "rgb(255, 255, 0)");
			horizontal.addColorStop(0.3, "rgb(0, 255, 0)");
			horizontal.addColorStop(0.5, "rgb(0, 255, 255)");
			horizontal.addColorStop(0.65, 'rgb(0, 0 ,255)');
			horizontal.addColorStop(0.8, 'rgb(255, 0 ,255)');
			horizontal.addColorStop(1, "red");
			rainbowCtx.fillStyle = horizontal;
			rainbowCtx.fillRect(0, 0, rainbowCtx.canvas.width, rainbowCtx.canvas.height);
		}

		onMounted(()=>{
			makeColorCanvas()
			makeRainbowCanvas()
		})

        return {
			colorCanvas,
			rainbowCanvas
		}
	}
}
</script>

 

 

mdn 참고