HTML5/RGBA
HTML5 RGBA example
Soul-Learner
2014. 7. 2. 18:17
HTML5에서 fillStyle='rgba()' 을 사용하여 반투명한 도형 그리기
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5 RGBA</title>
<style type="text/css">
canvas { border:1px solid black;}
</style>
<script type="text/javascript">
function AlphaTest() {
var c = document.getElementById("canvas1");
if(!c.getContext) {
alert('Canvas그리기를 지원하는 웹브라우저가 아닙니다');
return;
}
var ctx = c.getContext("2d");
ctx.fillStyle = 'rgb(200,0,0)';
ctx.fillRect(100,100, 100,100);
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.fillRect(150,150, 100,100);
ctx.strokeStyle = 'rgb(0,0,0)';
ctx.strokeRect(150,150, 100,100);
}
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="400"></canvas>
<p>
<input type="button" value="TEST" onclick="AlphaTest();">
</body>
</html>