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>




반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)