Web/WEB기본
[html5] [canvas] globalAlpha (투명도 주기)
saltdoll
2014. 1. 27. 17:23
반응형
캔버스 투명도 주기
<!DOCTYPE html>
<html>
<head lang="ko">
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function() {
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
context.globalAlpha = 0.2;
var colors = ["red","orange","yellow","green","blue","purple"];
for ( var i=0; i<14; i++)
{
context.fillStyle = colors[ i % colors.length ];
var x = 10 * ( i + 1 );
var y = 5 * ( i + 1 );
context.fillRect(x, y, 150, 75);
context.strokeRect(x, y, 150, 75);
}
},false);
</script>
</head>
<body>
<canvas></canvas>
</body>
</html>
반응형