반응형
캔버스 투명도 주기
<!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>
반응형
'Web > WEB기본' 카테고리의 다른 글
| [CSS] 텍스트 줄바꿈, 글자 자르기 CSS (0) | 2015.09.05 |
|---|---|
| [CSS] Print시 출력되지 않게 하는 CSS , 출력 할때만 나오게하기 (0) | 2015.08.28 |
| GET방식의 길이 제한 (0) | 2015.04.29 |
| w3c URL 규약 (0) | 2014.01.28 |
| [CSS] CSS3 Scrollbar, jQuery scrollbar (Webkit용) (0) | 2014.01.10 |
| [CSS] 글자색상 -webkit-text-fill-color:initial (0) | 2014.01.07 |
| [CSS] 글 포인트 주기 border-left-width이용 (0) | 2014.01.02 |
| [CSS] CSS 글 자간 줄간 설정 (0) | 2013.12.17 |
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)
(로그인하지 않으셔도 가능)