Canvas는 포토샵의 Layer개념으로 봐도 된다.
<style type='text/css'>
.gamelayer {
position: absoulte;
top : 0px;
left : 0px;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$(document).ready(function() {
var canvas = $('#mycanvas')[0];
var ctx = canvas.getContext('2d');
// 무지개 만들기
//fillRect(x좌표, y좌표, 가로크기, 세로크기)
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 50, 100);
ctx.fillStyle = 'rgb(255,100,0)';
ctx.fillRect(50, 0, 50, 100);
ctx.fillStyle = 'rgb(255,255,0)';
ctx.fillRect(100, 0, 50, 100);
ctx.fillStyle = 'rgb(0,255,0)';
ctx.fillRect(150, 0, 50, 100);
ctx.fillStyle = 'rgb(0,255,0)';
ctx.fillRect(150, 0, 50, 100);
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(200, 0, 50, 100);
ctx.fillStyle = 'rgb(0,0,100)';
ctx.fillRect(250, 0, 50, 100);
ctx.fillStyle = 'rgb(255,0,255)';
ctx.fillRect(300, 0, 50, 100);
//아래 정의된 캔버스의 크기를 오버할 경우 짤린다.
//2번 레이어 흰색 반투명
var canvas = $('#mycanvas2')[0].getContext('2d');
// 마지막 값은 알파값 0.5 = 50%
ctx.fillStyle = 'rgba(200,200,200, 0.5)';
ctx.fillRect(0, 0, 150, 150);
})
</script>
</head>
<body>
<canvas id='mycanvas' width='350' height='460'></canvas>
<canvas id='mycanvas2' class='gamelayer' width='350' height='460'></canvas>
[결과]
'IT 관련 > Html5' 카테고리의 다른 글
| 자주 사용하는 명령어 (0) | 2015.10.28 |
|---|---|
| JQuery로 별과 도표 만들기 (0) | 2011.11.03 |
| 웹사이트 소스 가져오기 (JSON, Ajax) (0) | 2011.10.28 |
| JSon을 이용한 플리커 이미지 가져오기 (0) | 2011.10.28 |
| JQTouch 활용2 (0) | 2011.10.15 |