HTML5 캔버스 색상 지정 방법

1 개요

HTML5 캔버스 색상 지정 방법

색상을 지정하는 방법은 다음 4가지

#	방법	예시	비고
1	색상명	"green"
2	16진 표기	"#0000FF"
3	RGB 표기	"rgb(0,0,255)"
4	RGBA 표기	"rgba(0,0,255,0.5)"

2 소스

<canvas id="my_canvas" width="400" height="100"></canvas>
<script>
var canvas = document.getElementById("my_canvas");
var context = canvas.getContext("2d");
context.fillStyle = "green"; // 색상명
context.fillRect(0,0,400,100);
context.fillStyle = "#0000FF"; // 16진 표기
context.fillRect(10,10,50,50);
context.fillStyle = "rgb(0,0,255)"; // RGB 표기
context.fillRect(70,10,50,50);
context.fillStyle = "rgba(0,0,255,0.5)"; //RGBA 표기
context.fillRect(130,10,50,50);
</script>

3 같이 보기

• HTML5 캔버스